TL;DR - Fiddle at http://jsfiddle.net/esxf0vLh/2/
It's hard to help you solve your exact problem without seeing more specific samples of the project you're working on, but I can help you understand a bit more about the code you've posted.
To keep things as simple as possible, I've stuck to your exact request describing a <div> becoming visible when it scrolls into view. For now I haven't taken care of it becoming invisible again if it's not in view, but this code could be a starting point for that with more tinkering :)
Firstly, let's imagine a group of <div> elements:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
Secondly, let's give them some styles. By default, our elements will be invisible. We have an extra .is-visible class which can make them visible - we'll use jQuery later to add it when the time comes:
div {
background: rebeccapurple;
opacity: 0;
}
div.is-visible {
opacity: 1;
}
jQuery time! Let's make a function that takes an element as an argument, and then returns true or false based on whether the top of that element has passed the bottom of our viewport (ie, the element has scrolled into the viewport):
function isScrolledIntoView(element) {
// Calculate the current scroll position of the bottom of your
// viewport - that's the line an element has to pass to qualify
// for becoming visible
var scrollBottomPosition = $(window).scrollTop() + $(window).height();
// Tell us whether it's true or false that the scroll position of
// the top of your element is less than the current scroll position
// of the bottom of your viewport - ie the element has entered the
// viewport
return ($(element).offset().top < scrollBottomPosition);
}
This function is going to come in handy. We'll give it a particular element we care about, and then keep firing the function every time the user scrolls. But not yet.
First we're going to make a function to add the .is-visible class to an element of our choosing.
// Takes an element as an argument - we'll give it one later.
function addClassIfVisible(element) {
// For each of that element, it asks "Is the element scrolled
// into view?" using the function we've made to answer that question.
// It'll give us true or false. If true, it adds the `.is-visible` class.
$(element).each(function () {
if (isScrolledIntoView(this)) {
$(this).addClass('is-visible');
}
});
}
Almost done. Lastly, let's set the stage. Firstly, I'd say we want this function to fire once as soon as the page loads - any elements above the fold will immediately fade into view.
Then, we add an event listener to keep firing the function every time the user scrolls. That way, it continually checks all the divs on the page and asks of each one, "Is this element visible above the fold?". And for each one, it's ready to add the .is-visible class when it gets the answer "Yes, this element is visible!":
// Run the function once first for any `div`
addClassIfVisible('div');
// Create an event listener that will run this function for any `div`
// every time the user scrolls.
$(window).scroll(function () {
addClassIfVisible('div');
});
Have a look at the working version at http://jsfiddle.net/esxf0vLh/2/ - you might need to adapt the above code depending on exactly what you're trying to achieve, but hopefully it helped. Let me know how you get on!
