I'm using some code from this Stack Overflow answer, but I can't seem to get it working for some reason.
When the page is scrolled to this element, I want this element to change opacity from 0 to 1, but for whatever reason, it doesn't seem to be working. The element is maybe 2000px down from the top of the page.
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.animate').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it in */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
};
});
});
});
body {
height: 2200px;
}
#circle {
background: #bf1e2c;
width: 300px;
height: 300px;
border-radius: 100%;
position: absolute;
top: 25px;
}
.animate{
opacity:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="circle" class="animate"></div>