I am attempting to dynamically add a class to a div element when it comes into view on the webpage. I am utilizing a minified jQuery 1.11.0 script to achieve this functionality.
Below is the jQuery code I have implemented:
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(window).scroll(function () {
$('.textbox').each(function () {
if (isScrolledIntoView(this) === true) {
$(this).addClass('visible');
}
});
});
Although I believe that my class is visible, for some reason, the visible class is not being added. Any insights into why this might be happening?
The CSS styles of the two classes involved are as follows:
.textbox {
width: 70%;
margin: 0 auto;
opacity: 0;
transition: all .5s;
top: -10px;
position: relative;
}
.textbox .visible {
opacity: 1;
top: 0;
}