如何检查窗口屏幕/视口顶部/底部的元素？

Question

如何通过以下方式检查元素交叉窗口屏幕：

• 交叉顶部 - 从向上滚动
• 交叉顶部 - 从向下滚动
• Cross Bottom - from up scrolling
• 交叉底部 - 从向下滚动

任何解决方案？

Answer 1

/ 交叉 - TOP - 从 - 向上滚动 /

if( jQuery(window).scrollTop() <= jQuery('#ELEMENT').offset().top ) {
    console.log('Crossed top - from up scroll');
}

/ 交叉 - 顶部 - 从 - 向下滚动 /

if( jQuery(window).scrollTop() >= jQuery('#ELEMENT').offset().top ) {
    console.log('Crossed top - from down scroll');
}

/ 交叉 - BOTTOM - 从 - 向下滚动 /

if( jQuery(window).scrollTop() >= jQuery('#ELEMENT').offset().top + jQuery('#ELEMENT').outerHeight() - window.innerHeight) {
    console.log('crossed bottom from - down scroll');
}

/ 交叉 - BOTTOM - 从 - 向上滚动 /

if( jQuery(window).scrollTop() <= jQuery('#ELEMENT').offset().top + jQuery('#ELEMENT').outerHeight() ) {
    console.log('crossed bottom from - up scroll');
}