-1

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>
Chava Geldzahler
  • 3,605
  • 1
  • 18
  • 32
rpivovar
  • 3,150
  • 13
  • 41
  • 79

2 Answers2

0

You are missing your closing }); for your document ready wrapper...

$(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);

            }

        }); 

    });
});

You need to scroll to the item to have it display.

Example fiddle not working: https://jsfiddle.net/bcom16pt/

Example fiddle working: https://jsfiddle.net/bcom16pt/1/

Tim Elsass
  • 966
  • 7
  • 9
0

It's because I had overflow-x: hidden set on the html and body.

html,body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

It works when I comment out overflow-x: hidden;.

rpivovar
  • 3,150
  • 13
  • 41
  • 79