我想让一系列元素在完全可见时淡入,当向下滚动时。如果我继续向下滚动,我不希望它们淡出,但如果我向上滚动,我确实希望它们淡出。
这是我找到的最接近的jsfiddle。 http://jsfiddle.net/tcloninger/e5qaD/
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').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'},500);
}
});
});
});
在向下滚动时,它做的正是我想要的,但如果我向上滚过它们,我也希望元素淡出。
我尝试过这个,但没有成功。
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
} else {
$(this).animate({'opacity':'0'},500); }
感谢您抽出时间查看这个内容。
0
或1
以外的其他不透明度值。感谢您的赞赏,这总是会让海报感到高兴的! - myfunkysidefadeTo()
函数,但使用更短的淡出时间。 - myfunkysidefade
类,因为这段代码只适用于具有该类的元素。 2) 将if (objectBottom < windowBottom) {
更改为if (objectBottom <= windowBottom) {
;因为你的页脚(可能)固定在页面底部,页脚底部永远不会小于窗口底部。通过将<
更改为<=
,当页脚底部等于窗口底部时,代码也将起作用。或者,您可以使用objectTop
来创建更好的效果,我将把这留给您决定。 - myfunkyside