Geçerli konumdan div'un kimliğini alma

Question

Bir sayfada n sayısı <section> var. Her biri 'page1', 'page2' gibi bir kimlik ile sağlanır ...

Üstte 2 düğmeyi Önceki ve Sonraki olarak söyleyin. Önceki düğmesine basıldığında, Önceki <section>'a kaydırılacaktır. Sonraki Düğmeye basılarak bir sonraki <section>'a benzer.

Ama şimdi sorun, kullanıcının kaydırma çubuğunu kullanarak sayfayı kaydırmasıdır, kullanıcının hangi <section> görüntülediğini nasıl tespit edebilirim?

Answer 1

senin bölüm olup olmadığını, ben öğrenmek için bu kullanıyorum "ViewPort'un" kontrol edilebilir:

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

Eğer PARÇA gösteriliyorsa sadece istemediğini kontrol eden bir işlevi oluşturun, algılamak istiyorsanız Geçerli görünüm, bölümünüzün konumuyla örtüşüyor. ben senin elemanları gösteriliyorsa bu (henüz test edilmemiş) algılamalıdır düşünüyorum

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