highlight menu on scrolling (if reach div)

问题:

i want highlight the menu point if the div is scrolled // or clicked.

http://jsfiddle.net/WeboGraph/vu6hN/2/ (thats an example what i want)

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

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

my (css)

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

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

here a link to the project: http://www.f-designs.de/test_onesite

回答1:

Use $(this).offset().top instead of $(this).position().top

Fiddle

As .position() get the current coordinates of the first element in the set of matched elements, relative to the offset parent whereas .offset() get the current coordinates of the first element in the set of matched elements, relative to the document.

In your website all the DIV with class inside .target are inside therefore all the element of class .target are returning the value .position().top equal to 0.

Decrease the offset value so that the class change when element reach the menu by making the if condition like this:

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

回答2:

Found this in 2018 and ran into a syntax error trying to replicate with a more recent version of jquery (+1.0). In the last line $('nav a[href=#'+ id +']') the attribute is not properly escaped and needs to be like so $('nav a[href="#'+ id +'"]') (note added "").

Here's where I found this https://api.jquery.com/attribute-contains-selector/