Выделить меню прокрутки (если досягаемость div)

Я хочу выделить точку меню, если прокручивается div//или нажата.

http://jsfiddle.net/WeboGraph/vu6hN/2/ (это пример того, что я хочу)

мой код: (ДС)

    $(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;
}

здесь ссылка на проект: http://www.f-designs.de/test_onesite

Ответ 1

Используйте $(this).offset().top вместо $(this).position().top

Fiddle

Как .position() получить текущие координаты первого элемента в наборе согласованных элементов относительно родителя смещения, тогда как .offset() получить текущие координаты первого элемента в наборе согласованных элементов относительно документа.

На вашем сайте все DIV с классом внутри .target находятся внутри, поэтому весь элемент класса .target возвращает значение .position().top, равное 0.

Уменьшите значение смещения так, чтобы class изменилось, когда элемент достигнет меню, выполнив условие if следующим образом:

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