向上滚动时检测元素是否可见

时间:2018-10-17 23:54:39

标签: javascript jquery

我正在使用JavaScript来检测何时元素在这样的滚动中可见。

function isOnScreen(elem) {
    // if the element doesn't exist, abort
    if( elem.length == 0 ) {
        return;
    }
    var $window = jQuery(window)
    var viewport_top = $window.scrollTop()
    var viewport_height = $window.height()
    var viewport_bottom = viewport_top + viewport_height
    var $elem = jQuery(elem)
    var top = $elem.offset().top
    var height = $elem.height()
    var bottom = top + height

    return (top >= viewport_top && top < viewport_bottom) ||
    (bottom > viewport_top && bottom <= viewport_bottom) ||
    (height > viewport_height && top <= viewport_top && bottom >= viewport_bottom)
}

jQuery( document ).ready( function() {
    window.addEventListener('scroll', function(e) {
        if( isOnScreen( jQuery( '.shipping-logos' ) ) ) { /* Pass element id/class you want to check */
            alert( 'The specified container is in view.' );
        }   
    });
});

这工作正常,但是我正在尝试进行更改,以便仅在屏幕向上滚动时才进行检测?当用户向下滚动时,我希望函数忽略该元素。

每个人都有一个实现此目标的示例吗?

0 个答案:

没有答案