jQueryは、ある要素が可視領域内にあるか否かを判断する

この機能はよく使われていますが、自分では注意してまとめたことがないので、ここでまとめます.自分と必要な友达に助けがあることを望んでいます!
私はテーマの形式を採用して、自分の記憶を助けます.
タイトル:ある要素,$("#item")を仮定すると,実装要素は可視領域で「出現」し,その要素は非可視領域で「消失」した.
必要な知識点(以下の知識点は単なる白話)、
 
スクロールバーをドラッグすると、この要素はページがスクロールするにつれて、ページの上部からの距離:

var itemOffsetTop = $("#item").offset().top;

 
$(#item)要素の高さ:

var itemOuterHeight = $("#item").outerHeight(); //            true,                   ,      .        .

 
ページのスクロール距離:

var winScrollHeight = $(window).scrollTop();

 
ブラウザの表示領域の高さ:

var winHeight = $(window).height();

 
以上の知識点を知って、この要素が可視領域内にあることをどのように確定するかを分析します.

/*    :
               ,             3 
    ①           
    ②           
    ③       
*/
//   1 ->            ,                    +         ->   
//   2 ->            ,                    -           ->   

 
具体的な実装:

var $win = $(window);
var itemOffsetTop = $("#item").offset().top;
var itemOuterHeight = $("#item").outerHeight();
var winHeight = $win.height();
$win.scroll(function () {
    var winScrollTop = $win.scrollTop();
    if(!(winScrollTop > itemOffsetTop+itemOuterHeight) && !(winScrollTop < itemOffsetTop-winHeight)) {
        console.log('   ');
    } else {
        console.log('   ');
    }
})

 
転載先:https://www.cnblogs.com/Zell-Dinch/articles/4647620.html