Подсветка текущего раздела в навигаторе

Question

У меня есть страница прокрутки с навигационной панелью, и я хочу, чтобы раздел, который прокручивается пользователем, будет выделен на панели навигации. На данный момент это почти выполняет это, но выделяет неверную ссылку.

Демонстрация находится на http://codepen.io/meek/pen/NNprYb?editors=1000

код, который делает это следующим образом:

// highlight current tab 
    $(window).on("scroll", function() { 

     var currentPos = $(window).scrollTop(); 

     $('.nav li a').each(function() { 
      var sectionLink = $(this); 
      var section = $(sectionLink.attr('href')); 
      if(section.position().top <= currentPos && sectionLink.offset().top + section.height() >= currentPos) { 
       $('.nav li').removeClass('active'); 
       sectionLink.parent().addClass('active'); 
      } 
      else { 
       sectionLink.parent().removeClass('active'); 
      } 
     }); 

    }); 

Я пытался несколько вещей, но не может заставить его надежно добавить активный класс к правильный сеанс. Помогите оценить!

Редакция:

Редактирование: чтобы быть более четким, проблема заключается в том, что он выделяет только раздел, когда вы прокручиваете его немного, а не вверху справа, что означает, что, когда вы нажимаете на раздел, чтобы перейти к началу этого раздела автоматически, этот раздел не выделяется.

edit2: Так изменения, если заявление:

if(currentPos + $('#nav-wrapper').outerHeight() >= section.position().top && currentPos + $('#nav-wrapper').outerHeight() <= sectionLink.offset().top + section.outerHeight()) { 

сделал улучшение, хотя и не полностью исправили проблему. В разделе «Дом», «О нас» и «Портфолио» все выделены правильные ссылки, но не контакты.

Answer 1

Вам необходимо учитывать высоту навигационной панели и вычесть ее из верхней части выделенной секции.

Высота в настоящее время жестко закодирована в вашем CSS при 75px, но я включил селектор jQuery для высоты в случае необходимости изменения/исчезновения для меньших экранов.

Хорошая работа, кстати.

$(window).on("scroll", function() { 
    var currentPos = $(window).scrollTop(); 

    $('.nav li a').each(function() { 
    var sectionLink = $(this); 
    // capture the height of the navbar 
    var navHeight = $('#nav-wrapper').outerHeight() + 1; 
    var section = $(sectionLink.attr('href')); 

    // subtract the navbar height from the top of the section 
    if(section.position().top - navHeight <= currentPos && sectionLink.offset().top + section.height()> currentPos) { 
     $('.nav li').removeClass('active'); 
     sectionLink.parent().addClass('active'); 
    } else { 
     sectionLink.parent().removeClass('active'); 
    } 
    });   
});