在视口中显示图像，如果不在视口中则消失

Question

在this fiddle中，一旦你滚动它就会出现但是当它离开视口时如何让它消失？

SCRIPT

$(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'},1500);

        }

    }); 

});

}）;

Answer 1

在这种情况下可以帮助你的东西是每个元素和每种可能情况的图表。

因此，如果

，则元素将位于视口内

如果您想检查它是否完全可见

• ot3 >= st
• 和 ot2 < st+wh

或者，如果您想检查它是否至少部分可见/已消失

• ot1+h1 > st
• 和 ot3+h3 < st+wh

如果

，则元素将位于视口之外

• ot1+h1 < st
• 或 ot2 > st+wh

被

• ot1，ot2，ot3 offset().top
• h1，h2，h3 outerHeight()
• st $(window).scrollTop()
• wh $(window).height()

当然，您不需要同时检查两者。

var elemTop=$(this).offset().top;
var elemHeight=$(this).outerHeight();
var scrollTop=$(window).scrollTop();
var winHeight=$(window).height();
if(elemTop>=scrollTop&&elemTop<scrollTop+winHeight) {
    //fade in
} else {
    //fade out
}

具有宽度和左偏移的水平滚动相同。

使用offset()代替position()，因为最后一个是相对于元素的父级。

并且，根据您的小提琴手，在动画之前使用stop()来停止当前动画，然后再开始新动画。否则，如果用户快速上下滚动，您的对象将开始闪烁，因为jQuery将在开始发布新动画之前完成每个动画。