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语句改为：

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

突出显示导航栏中的当前部分

1 个答案: