Parallax Défilement du menu en surbrillance item

Question

Je construis un site et cette fonctionnalité est utilisée sur de nombreux sites de parallaxe. Les triangles qui apparaissent lorsque je survole les éléments de menu que je veux être en mesure de rester visible sur l'élément de menu spécifique quand il est cliqué et quand la section particulière est défilée vers. Donc quand je clique sur "live" le triangle devrait apparaître et rester apparent ou si je fais défiler vers cette section il devrait apparaître et le même pour toutes les autres sections.

Voici une partie du code im travaille avec ... laissez-moi savoir si je dois ajouter plus http://jsfiddle.net/lemonhead1374/4HRxr/

Voici le HTML HTML et CSS sont lien jsFiddle

<div class="header"> 
     <div class="nav"> 
      <div class="inner"> 
     <a href="#home"> home</a> 
     <a href="#live"> live</a> 
     <a href="#learn">learn</a> 
     <a href="#mission">mission</a> 
     <a href="#heal">heal</a> 
     <a href="#adorn">adorn</a> 
     <a href="#sip">sip</a> 
      </div> 
     </div> 
<div> 



<section id="home"> 
<div class="lower"> 
<div class="homecontainer"> 
    <div class="binder"> 
     hi all    
    </div> 
</div> 
</div> 
</section> 

<section id="live"> 
hi alllllllllll hellllloooo 
</section> 

Answer 1

Il y a un excellent exemple already here at Stack Overflow qui fait ce que vous voulez faire. Il fournit non seulement le code que vous recherchez et un jsFiddle pour le voir fonctionner, mais il est agréable et compact et ne nécessite pas de plugin. See it here.

Si vous préférez utiliser un plugin, il y en a un intéressant qui utilise directement Javascript called skrollr. Il répond à l'événement de défilement et utilise une méthode très intuitive pour coder les points de rupture. Ça vaut le coup d'oeil.

Je dois souligner que, en voyant votre code que vous avez toutes sortes de problèmes, non seulement avec votre code html de base étant très maladroits (beaucoup de divs imbriqués et les ID inutiles dans tous les sens, sans même, presque -semantic markup, etc.) mais sous le capot votre Javascript jette toutes sortes d'erreurs, probablement parce que vous avez copié de gros morceaux de code d'un autre site. Il y a toutes sortes de drapeaux lancés pour des problèmes d'origine croisée, des polices Web et des images non trouvées, etc. Votre code est un désordre. Si c'est un exercice d'apprentissage, je suppose que cela n'a pas d'importance. Mais si c'est le travail du client pour quelqu'un d'autre, vous allez certainement vouloir réparer tout cela, et je suppose que vous devrez faire quelques devoirs pour commencer.

Si vous êtes un débutant, ou même si vous voulez une bonne critique sur la technique de codage appropriée, il y a ample resources all over the internet pour apprendre HTML et le codage css et je recommande fortement passant par le tutorials at Code Academy. Comme indiqué précédemment, si l'URL que vous avez fournie est juste pour votre propre étude, puis trash away, c'est une façon parfaitement juste d'apprendre, mais Code Academy pourrait être plus efficace.