javascript - 在导航栏中突出显示当前部分

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

    });

我已经尝试了几种方法，但无法将事件类可靠地添加到正确的 session 中。帮助表示赞赏!

编辑:更清楚一点，问题是它只会在您滚动到该部分时突出显示该部分，而不是在顶部突出显示，这意味着当您单击一个部分以滚动到该部分的顶部时该部分不会自动突出显示。

edit2:因此将 if 语句更改为:

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

虽然没有完全解决问题，但已经有所改进。 home、about 和 portfolio 部分都突出显示了正确的链接，但没有突出显示联系人。

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