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

Question

私は<section>のn個の番号をページに持っています。それぞれには 'page1'、 'page2'などのIDが提供されています...

2つのボタンは前後に2つのボタンがあります。 [前へ]を押すと、前の<section>にスクロールされます。次のボタンを押すと次の<section>と同様に表示されます。

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

Answer 1

あなたのセクションがある場合は、私が見つけるためにこれを使用しています「ビューポート」で確認することができます。

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; 
} 

あなたは部品が示されている場合だけかどうかを確認する関数を作成し、検出したい場合現在のビューがセクションの位置と重なっています。

あなたは$（ウィンドウ）.on（ "スクロール"）

編集にそれを結合することができる：私はあなたの要素は（まだテストしていない）に示されている場合、これは検出されるべきだと思う

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); 
}