Wie überprüft man, ob div für jedes div den oberen Seitenrand erreicht?

Question

Dies ist meine aktuelle Lösung zu überprüfen, ob eine bestimmte div die oben auf der Seite erreicht, was ich von hier bekam https://stackoverflow.com/a/5279537/4671165

document.addEventListener("scroll", Scroll, false); 

function Scroll() { 
    var top = $('.element').offset().top - $(document).scrollTop(); 

    if (top < 150){ 
      var textvariable = $('.text').text(); 
    } 
} 

Aber ich möchte etwas, jedes Mal ein anderes div erreicht die Spitze des tun Seite, daher habe ich derzeit

var top1 = $('.element1').offset().top - $(document).scrollTop(); 
    var top2 = $('.element2').offset().top - $(document).scrollTop(); 
    var top3 = $('.element3').offset().top - $(document).scrollTop(); 

if (top1 < 150 && top2 > 150){ 
    var textvariable = $('.text1').text(); 
} 

if (top1 < 150 && top2 < 150 && top3 > 250){ 
    var textvariable = $(.text2').text(); 
} 

if (top2 < 150 && top3 < 250){ 
    var textvariable = $(.text3').text();  
} 

Allerdings scheint dies nicht der effektivste Weg, aber ich kann nicht herausfinden, was ist. Zumal ich mehr Elemente als nur 3 im Projekt habe. Also ich suche nach einem effektiveren Weg.

Answer 1

fand ich eine jquery Lösung

function ScrollStart() { 

var scrolled = $(this).scrollTop(); 


/*filter current element at the top with a certain class & give it active class*/ 

$('.step').removeClass('activetext').filter(function() { 
    return scrolled <= $(this).offset().top + $(this).height() - 50 && scrolled >= $(this).offset().top - 50; 
}).addClass('activetext'); 

/* make exclusion for first element */ 

var boven = $('.first').offset().top - $(document).scrollTop(); 

if (boven > 0){  
    $('.first').addClass('activetext'); 
} 

/*make exclusion for last element*/ 

var bottom = $('.last').offset().top - ($('.last').height()/5) - $(document).scrollTop(); 

if (bottom < 150){ 
    $('.step').removeClass('activetext') 
    $('.last').addClass('activetext'); 
} 
else{ 
    $('.last').removeClass('activetext') 
} 

    /* give variable 'text' the text of the active class & append it */ 

var text = $('.activetext .headertekst').text(); 
$('.dropbtn').empty(); 
$('.dropbtn').append(text); 
    $('.dropbtn').append('<img src="images/downarrow.svg" galleryimg="no"></img>'); 

}

Answer 2

Ich habe dies zusammen mit ES6. I glaube, sollte dies funktionieren. Es ist schon eine Weile her, dass ich getBoundingClientRect() benutzt habe.

var divs = document.querySelectAll('div'); 

document.addEventListener("scroll", Scroll, false); 

function Scroll() { 
    divs.forEach((memo,index) => { 
     let divTop = memo.getBoundingClientRect().top; 
     if (divTop <= 0) { 
      var textvariable = $('.text' + index).text(); 
    }); 
} 

Answer 3

Hoffnung this hilft. Es sollte einfacher zu bedienen sein und es wurden bereits viele Bugs für Sie behoben. Es ist eine 1,82-kb-Datei, also gibt es nicht wirklich viel nutzloses Zeug, wenn es hinzugefügt wird.