jquery - 現在の位置にあるdivのIDを取得する

Question

1ページにn個あり<section>ます。それぞれに「page1」、「page2」などのIDが提供されます。

上部に「前へ」と「次へ」という2つのボタンを配置します。[前へ]を押すと、[前へ]にスクロールされ<section>ます。<section>次へボタンを押すと次のようになります。

しかし、問題は、ユーザーがスクロールバーを使用してページをスクロールするときに、どの<section>ユーザーが表示しているかをどのように検出できるかということです。

Answer 1

セクションが「ViewPort」にあるかどうかを確認できます。これを使用して次のことを確認しています。

function isTotallyInViewPort($entry){
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var windowVisibleBottom = windowScrollTop + windowHeight;
    var entryTop = $entry.offset().top;
    var entryOuterHeight = $entry.outerHeight();
    var entryVisibleBottom = entryTop + entryOuterHeight;

    var isInView = windowScrollTop < ( entryTop ) < (windowVisibleBottom);
    if(!isInView) return false;

    var isCompleteInView = ( entryVisibleBottom ) < (windowVisibleBottom);
    return isCompleteInView;
}

パーツが表示されているかどうかを検出する場合は、現在のビューがセクションの位置と重なっているかどうかをチェックする関数を作成するだけです。

$（window）.on（ "scroll"）にバインドできます

編集：これはあなたの要素が表示されているかどうかを検出するはずだと思います（まだテストされていません）

function isPartlyInViewPort($entry){
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var windowVisibleBottom = windowScrollTop + windowHeight;
    var entryTop = $entry.offset().top;
    var entryOuterHeight = $entry.outerHeight();
    var entryVisibleBottom = entryTop + entryOuterHeight;

    var isAboveViewPort = entryVisibleBottom < windowScrollTop;
    var isBelowViewPort = windowVisibleBottom < entryTop;

    return !(isAboveViewPort || isBelowViewPort);
}