在导航栏中突出显示当前部分 [英] Highlighting current section in navbar

问题描述

我有一个带有导航栏的滚动页面，我希望用户滚动的部分在导航栏中突出显示.目前，它几乎可以完成此操作，但是突出显示了错误的链接.

I have a scrolling page with a navbar and I want the section the user is scrolling through to be highlighted in the navbar. At the moment it almost accomplishes this, but is highlighting the incorrect link.

在 http://codepen.io/meek/pen/NNprYb上进行演示. editors = 1000

执行此操作的代码如下:

The code that does this is as follows:

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

    });

我已经尝试了几种方法，但是无法可靠地将活动类添加到正确的会话中.感谢帮助！

I've tried several things, but can't get it to reliably add the active class to the correct session. Help appreciated!

edit:更清楚地说，问题在于，它仅在您滚动到该部分时才突出显示该部分，而不是在顶部右移，这意味着当您单击某个部分以滚动到该部分的顶部时自动，该部分不会突出显示.

edit: to be clearer, the problem is that it's only highlighting the section when you've scrolled a bit into it, instead of right at the top, meaning that when you click a section to scroll to the top of that section automatically, that section is not highlighted.

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

edit2: So changing the if statement to:

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

进行了改进，尽管尚未完全解决该问题. 首页"，关于"和投资组合"部分都突出显示了正确的链接，但未突出显示联系方式.

has made an improvement although not completely fixed the issue. The home, about and portfolio sections all highlight the correct link but not contact.

推荐答案

您需要考虑导航栏的高度，并将其从要突出显示的部分的顶部减去.

You need to account for the height of the navbar and subtract it from the top of the section you want highlighted.

当前高度已在CSS中以75px硬编码，但是我为高度选择了一个jQuery选择器，以防在较小的屏幕上需要更改/消失.

The height is currently hardcoded in your CSS at 75px but I included a jQuery selector for the height in case it needs to change/disappear for smaller screens.

顺便说一句.

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

这篇关于在导航栏中突出显示当前部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！