javascript - jquery 获取窗口位置 + 滚动 - 但如果不滚动则不显示

Question

嗨，卷轴上显示的照片很少。 我使用这段代码:

$(document).ready(function() {
    $(window).scroll( function(){
        $('.fade').each( function(i){
            var bottom_of_object = $(this).position().top + ( $(this).outerHeight() / 2 );
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).addClass('showme');
            }
            if( bottom_of_window < bottom_of_object ){
                $(this).removeClass('showme');
            }
        });
    });
});

这项工作非常好，但是当我打开页面时，如果 windows 太高，照片不会显示，并且让空间变得非常难看。它(我认为)是因为添加类只在窗口滚动上工作。

我该如何解决这个问题？我需要当图片显示在窗口位置而不仅仅是滚动时？

谢谢!

Answer 1

将 scroll 触发附加到代码中:

$(document).ready(function() {
    $(window).scroll( function(){
        $('.fade').each( function(i){
            var bottom_of_object = $(this).position().top + ( $(this).outerHeight() / 2 );
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).addClass('showme');
            }
            if( bottom_of_window < bottom_of_object ){
                $(this).removeClass('showme');
            }
        });
    });

    $(window).scroll();
});

$(window).scroll() 在 window 上触发 scroll 事件 - docs .