0

好的,所以我的问题是我有一个客户的视差网站,当他们向下滚动视差网站时,他们希望产品描述淡入。我认为我遇到的问题是因为该站点实际上是一个长页面,当页面加载时脚本变得混乱并且从“opacity: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>
// 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>
4

1 回答 1

0

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

另外,我认为你让 JS 工作太辛苦了——我会尝试在 .scroll() 函数之外计算 bottom_of_object ,这样它就不会在每次用户滚动时都计算位置。

而对于简单的淡入/淡出,我只会做一个显示:无,.fadeIn()。

于 2013-07-30T16:08:41.617 回答