it-swarm.com.de

menü beim Scrollen hervorheben (bei Erreichen von div)

ich möchte den Menüpunkt hervorheben, wenn das div // gescrollt oder angeklickt wird.

http://jsfiddle.net/WeboGraph/vu6hN/2/ (das ist ein Beispiel was ich will)

mein 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');
              }
          });
      });
    });

mein (html nav)

        <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> 

meine (css)

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

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

hier ein Link zum Projekt: http://www.f-designs.de/test_onesite

12
fab

Verwenden Sie $(this).offset().top anstelle von $(this).position().top

Fiddle

Da .position() die aktuellen Koordinaten des ersten Elements in der Menge der übereinstimmenden Elemente relativ zum übergeordneten Versatz abruft, während .offset() die aktuellen Koordinaten des ersten Elements in der Menge der übereinstimmenden Elemente relativ zum Dokument erhält.

In Ihrer Website sind alle DIV mit der Klasse inside .target enthalten. Daher gibt das gesamte Element der Klasse .target den Wert .position().top = 0 zurück.

Verringern Sie den Versatzwert, sodass sich die Variable class ändert, wenn das Element das Menü erreicht, indem Sie die if-Bedingung wie folgt festlegen:

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

Fand das 2018 und fand einen Syntaxfehler bei dem Versuch, mit einer neueren Version von Jquery (+1.0) zu replizieren. In der letzten Zeile $('nav a[href=#'+ id +']') ist das Attribut nicht korrekt maskiert und muss wie $('nav a[href="#'+ id +'"]') sein (Anmerkung hinzugefügt "").

Hier habe ich das gefunden https://api.jquery.com/attribute-contains-selector/

0
Tristan Timblin