web-dev-qa-db-fra.com

mettre le menu en surbrillance au défilement (si atteindre div)

je veux mettre en surbrillance le point de menu si la div est défilé // ou cliqué.

http://jsfiddle.net/WeboGraph/vu6hN/2/ (c'est un exemple de ce que je veux)

mon code: (JS)

    $(document).ready(function(){
      $('nav a').on('click', function(event) {
          $(this).parent().find('a').removeClass('active_underlined');
          $(this).addClass('active_underlined');
      });

      $(window).on('scroll', function() {
          $('.target').each(function() {
              if($(window).scrollTop() >= $(this).position().top) {
                  var id = $(this).attr('id');
                  $('nav a').removeClass('active_underlined');
                  $('nav a[href=#'+ id +']').addClass('active_underlined');
              }
          });
      });
    });

mon (nav html)

        <nav>
           <div id="cssmenu">
              <ul id="horizontalmenu" class="underlinemenu">
                  <li><a data-scroll href="#fdesigns"  class="active_underlined">FDesigns</a> </li>
                  <li><a data-scroll href="#skills">skills</a> </li>
                  <li><a data-scroll href="#workflow">WORKFLOW</a> </li>
                  <li><a data-scroll href="#portfolio">Portfolio</a> </li>
                  <li><a data-scroll href="#about">About</a> </li>
                  <li><a data-scroll href="#kontakt">Kontakt</a> </li>
              </ul>   
          </div>
        </nav>

mon (css)

.active_underlined a {
  color: #fff;
  border-bottom: 2px solid #ebebeb;
}

a.active_underlined {
  color: #fff;
  border-bottom: 2px solid #ebebeb;
}

voici un lien vers le projet: http://www.f-designs.de/test_onesite

jqueryhtmlcssmenunavbar
12
fab

Utilisez $(this).offset().top au lieu de $(this).position().top

Fiddle

En tant que .position(), obtenez les coordonnées actuelles du premier élément de l'ensemble des éléments correspondants, par rapport au parent décalé, alors que .offset() récupère les coordonnées actuelles du premier élément de l'ensemble des éléments correspondants, relatives au document.

Dans votre site Web, tous les éléments DIV dont la classe est à l'intérieur de .target sont à l'intérieur; par conséquent, tous les éléments de la classe .target renvoient la valeur .position().top égale à 0.

Diminuez la valeur de décalage afin que l'élément class change lorsque l'élément atteint le menu en créant la condition if comme ceci:

if($(window).scrollTop() >= $(this).offset().top - $("#cssmenu").height())
9
Gaurav Kalyan

Trouvé ceci en 2018 et rencontré une erreur de syntaxe lors de la réplication avec une version plus récente de jquery (+1.0). Dans la dernière ligne $('nav a[href=#'+ id +']') l'attribut n'est pas correctement échappé et doit ressembler à so $('nav a[href="#'+ id +'"]') (note ajoutée "").

Voici où j'ai trouvé ceci https://api.jquery.com/attribute-contains-selector/

0
Tristan Timblin