ページをスクロールするとアクティブなdivを表示するJavaScript

Question

ほとんどどこでも検索しましたが見つかりませんでした。私はFacebookやInstagramのようなフィードを持っています。私は、他の投稿（例えば、図表のようなもの）のように、5つの投稿ごとにadvirtesment divを配置します。問題は、スクロール位置がadvirtesment divにある場合にページをスクロールすると、jsでインビューのようなクラスを追加したいということです。どうやってやるの？ちなみに、スクロールがページの一番下にあるときは、他の投稿を読み込みます。 ありがとうございました

Answer 1

jquery getBoundingClientRectを使用して、要素が表示されているかどうかを確認し、その中にビューのクラスを追加できます。以下の方法にあなたのdiv要素をパスし、自分のdivは、それが役立つかもしれない

function isElementInView(element){ 
    var boundry = element.getBoundingClientRect(); 

    var isInView = boundry.top >= 0 && boundry.left >= 0 && 
       boundry.bottom <= (window.innerHeight || $(window).height()) && 
       boundry.right <= (window.innerWidth || $(window).width()); 

    return isInView; 
}