jQuery動畫滾動到位置不工作

Question

我使用this Stack Overflow answer一些代碼，但我似乎無法得到它的工作原因。

當頁面滾動到此元素時，我希望此元素將不透明度從0更改爲1，但由於某種原因，它似乎不起作用。該元素可能從頁面頂部向下2000px。

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

Answer 1

你缺少你收});爲您的文檔準備包裝...

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

      } 

     }); 

    }); 
}); 

您需要滾動到該項目通過它來顯示。

例小提琴不工作：https://jsfiddle.net/bcom16pt/

例撥弄工作：https://jsfiddle.net/bcom16pt/1/

Answer 2

這是因爲我對HTML和身體overflow-x: hidden集。

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

它在我註釋掉overflow-x: hidden;時有效。