Hinzufügen von offset(). Top Menge auf Blättern

Question

Ich habe ein festes Stück Text und ich versuche, jedes Mal eine andere Klasse hinzuzufügen, wenn der Text ein div auf Blättern eingibt. Ich habe es funktioniert kein Problem. Wenn ich jedoch einen Offset-Betrag zu dem festen Text z.

top: 400px 

Ich brauche dies in der JS-Offset zu begegnen. Aber ich kann es nicht herausfinden. Ich habe versucht mit:

.offset().top 400); 

Aber es funktioniert nicht. Hier ist ein Code, den ich zur Zeit bin mit:

HTML

<p class="text">TEXT HERE</p> 

<div class="section1"></div> 
<div class="section2"></div> 
<div class="section3"></div> 
<div class="section4"></div> 

JS

$(window).scroll(function (event) { 
    var scroll = $(window).scrollTop(); 
    $('.text').toggleClass('blue', 
     scroll >= $('.section1').offset().top 
    ); 
    $('.text').toggleClass('magenta', 
    scroll >= $('.section2').offset().top 
    ); 
    $('.text').toggleClass('green', 
    scroll >= $('.section3').offset().top 
    ); 
    $('.text').toggleClass('orange', 
    scroll >= $('.section4').offset().top 
    ); 
}); 
//trigger the scroll 
$(window).scroll();//ensure if you're in current position when page is refreshed 

Der Text so schnell hinzuzufügen Klasse benötigt, da es die relevanten div eintritt.

Hier ist eine Arbeits Geige: http://jsfiddle.net/6PrQW/334/

Answer 1

So Sie fast alles richtig gemacht haben, aber ich denke, wo man schief gelaufen ist hier: var scroll = $(window).scrollTop();

Sie wollen nicht Offset mit dem Fenster berechnen, sondern möchten, dass Sie die von Ihrem klebrigen Text Offset verwenden. Also verwenden Sie stattdessen: var scroll = $('.text').offset().top;

Lassen Sie mich wissen, wenn das hilft.

bearbeiten, und here ist Ihre Geige mit den Änderungen. Beachten Sie, dass ich Ihre Zeile für die Einstellung der blauen Klasse bearbeitet habe, da Sie den klebrigen Offset nicht mit sich selbst vergleichen möchten.

Answer 2

heraus zu finden, wenn etwas in Ihrem Fenster ist, haben Sie Gotta Verwendung so etwas wie ...

if($(elem).offset().top - $(window).scrollTop < $(window).height()){ 
    //stuff 
} 

, dass so bald auslösen soll als Elem sichtbar auf der Seite! Sie können es beispielsweise mit $ (window) .height()/2 überprüfen, wenn Sie möchten, dass es stattdessen in der Mitte der Seite ausgelöst wird. Hoffe das hilft!