Div Fade-In在屏幕上（当前自动褪色！？） - 视差网站

Question

好的，所以我的问题是我有一个客户的视差网站，当他们向下滚动视差网站时，他们希望产品描述淡入。我认为我的问题是因为该网站实际上是一个长页面，当加载页面时，脚本会变得混乱并且从“不透明度：0”中淡入div。我已经对div进行了长时间的淡入，以了解发生了什么，我还制作了一个没有适当格式的垃圾箱来测试它。我已经上传了该网站的临时副本（我正在离线工作）以显示正在发生的事情。

http://ethicalincubator.com/parallax/parallax30.07/index_kmd.php#!images

感谢大家的帮助!!! ： - ）

CSS

/* Hide any element */
.hideme               {
Opacity:0;
}

HTML

<div
class="hideme fadein-on-view"
style="opacity:0;width:200px;height:80px;background-color:white;">Fade
In</div>

SCRIPT

<script>
// Scroller script for Fade-In when "div" is on screen
$(document).ready(function()
{
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.fadein-on-view').each( function(i){
var
bottom_of_object = $(this).position().top + $(this).outerHeight();
var
bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if(
bottom_of_window > bottom_of_object ){    
$(this).animate({'opacity':'1'},5000);
}
});
});
})
</script>

Answer 1

要检查窗口底部，而不是使用.scrollTop，请尝试window.pageYOffset。

另外我认为你让JS工作太难了 - 我会尝试计算.scroll（）函数之外的bottom_of_object，这样每次用户滚动时它都不会计算位置。

对于简单的淡入/淡出，我只会做一个显示：none，.fadeIn（）。