Ajout du décalage(). Montant supérieur sur le parchemin

Question

J'ai un texte fixe et j'essaie d'ajouter une classe différente à chaque fois que le texte entre dans un parchemin. Je l'ai travaillé sans problème. Mais si j'ajoute un montant de décalage au texte fixe, par ex.

top: 400px 

Je dois contrer ce décalage dans le JS. Mais je n'arrive pas à comprendre. J'ai essayé d'utiliser:

.offset().top 400); 

Mais cela ne fonctionne pas. Voici un code que je suis actuellement en utilisant:

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 

Le texte doit ajouter la classe dès qu'il entre dans la div pertinente.

est ici un violon de travail: http://jsfiddle.net/6PrQW/334/

Answer 1

Vous avez donc plus tout droit, mais je pense que lorsque vous êtes allé mal est ici: var scroll = $(window).scrollTop();

Vous ne voulez pas calculer à l'aide de la fenêtre offset, plutôt que vous voulez utiliser le décalage de votre texte collant. Donc, à la place, utilisez: var scroll = $('.text').offset().top;

Faites-moi savoir si cela aide.

modifier, et here est votre violon avec les modifications. Notez que j'ai modifié votre ligne pour définir la classe bleue car vous ne voulez pas faire correspondre le décalage collant avec lui-même.

Answer 2

Pour savoir quand quelque chose est dans la fenêtre, tu dois utiliser quelque chose comme ...

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

Cela devrait déclencher dès que élém est visible sur la page! Vous pouvez le vérifier par rapport à $ (window) .height()/2, par exemple, si vous voulez qu'il se déclenche au centre de la page à la place. J'espère que cela t'aides!