Jquery 滚动时，当前节未在导航中正确突出显示

我正在创建一个带有锚链接的导航的长页面。当您向下滚动页面时，导航中的相应链接将高亮显示，以匹配您所在的部分

它的作品很好，但我也有一个网页上没有在导航锚链接部分。问题是，添加此节会破坏我的节顺序，从而破坏正确的选定状态

下面是一个代码笔，向您展示一个示例。-请注意，当您向下滚动到“新建部分”时，导航中的“索赔”链接将突出显示，这是错误的

我需要做什么才能只突出显示当前链接

这是我的密码

HTML

jQuery

var homeH = $( window ).height(),
    pH = [];
pH.push("0"); 

// create array with panel heights
for (var s=1; s<5; s++) { 
  var po = $(".js-panel section:nth-child("+s+")").position();
  pH.push( Math.round(po.top) );
};

$( window ).scroll(function() {      

  // toggle top menu selection
  for (var i=0;i<6;i++) {
    if ( $( window ).scrollTop() > pH[i]+900 ) { 
      $("#prod-menu ul li").removeClass("sel");
      $("#prod-menu ul li:nth-child("+(i+1)+")").addClass("sel");
     }
  };

});

---

我已经更改了您代码中的一些位，我希望这是您想要的

首先，我改变了这一行：

var po=$.js面板部分：第n个子项+s+位置

到

var po=$.js面板部分。导航部分：eq+s+.offset

并将类nav部分添加到所有应该是导航的一部分的html部分

切换功能现在分为两个for循环，但这可能不是必需的

没有css部分的所有代码 html:

JS:

---

我用叉子叉了你的密码笔，试着用另一种方法

通过使用股票代码而不是OnScrolleEvent：它的工作很好

---

如果你把所有这些都封装在一个插件中会更好。

我也决定尝试一下。我喜欢灵活处理类似的事情，尽可能删除硬编码值，并考虑动态页面流。在我的fork中，我使用href和panel id来利用那些匹配所隐含的链接，而不是在要链接到顶部导航的面板上使用类

var navPanels = $();
$('#prod-menu a').each(function() {
    navPanels = navPanels.add($(this.hash));    // easy array of nav panels according to nav items
});

采用这种方法，您可以简单地添加或减少导航项目和面板，而无需额外的类。此外，如果它们更改高度或移动是因为堆栈中位于它们上方的另一个元素导致偏移量更改，则滚动时，从起始位置开始的offset.top值数组将不匹配，因此在滚动时会选中该值。然后，偏移检查变为：

navPanels.each(function() {
    var $p = $(this)    // current panel in loop

    if ( $( window ).scrollTop() + $('#prod-menu').outerHeight() >= $p.offset().top) { 
        $("#prod-menu ul li").removeClass("sel");
        $('#prod-menu a').filter('[href="#'+$p.attr('id')+'"]').parent().addClass("sel");
    }
});

我还考虑了整个脚本中的顶部导航高度，以便当该部分滚动经过可查看区域（从顶部导航下方开始）时，您的导航项目高亮显示

这种方法没有做的是删除不想在nav中显示的部分的突出显示。相反，它只是在突出显示之前离开导航

这是完整的JS：

$(function() {
    var homeH = $( window ).height(),
        navPanels = $();

    $('#prod-menu a').each(function() {
        navPanels = navPanels.add($(this.hash));    // easy array of nav panels according to nav items
    });

    $( window ).scroll(function() {
        // toggle top menu
        if ( $( window ).scrollTop() < homeH/2) {
            $("#prod-menu ul li").removeClass("sel");
            $("#prod-menu").css("top", ($('#prod-menu').outerHeight()*-1));
        } 
        else {
            $("#prod-menu").css("top", "0");
        };

        // toggle top menu selection
        navPanels.each(function() {
            var $p = $(this)    // current panel in loop

            if ( $( window ).scrollTop() + $('#prod-menu').outerHeight() >= $p.offset().top) { 
                $("#prod-menu ul li").removeClass("sel");
                $('#prod-menu a').filter('[href="#'+$p.attr('id')+'"]').parent().addClass("sel");
            }
        });
    });

    // animating anchor link scrolling
    // snippet from css-tricks 
    // css-tricks.com/snippets/jquery/smooth-scrolling
    $("a[href*=#]:not([href=#])").click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top-$('#prod-menu').outerHeight()
                }, 700);
                return false;
            }
        }
    });
});

然后，当您滚动到不在导航中的区段时，在您点击导航中的另一区段之前，不会突出显示任何内容

---

同样，这里可以看到完整的笔：

谢谢Wikunia，这非常接近。它在滚动时工作得很好，但是当你点击锚链接时，上一个链接被选中。例如，如果我单击“评论”，则“指南”显示为所选状态。有什么办法可以解决这个问题吗？嗨@Adam真的不是一个受欢迎的解决方案，但是现在应该解决这个问题！不知道如何改进，但应该有更好的方法：DTry this:。我只是对Wikunia的代码做了一点修改。谢谢你。我认为这是最好的答案，因为这是最少的代码，而且你还设法去掉了导航中没有的部分的突出部分。我甚至没问这个，但我在想！这是一种有趣的消遣。昨晚我很无聊，想做点什么。谢谢你发帖提问。

    var homeH = $( window ).height(),
    pH = new Array();

// create array with panel heights

   $(".js-panel section").each(function(){
      var elm = $(this);
       var po = elm.position();
      pH.push({
        top : Math.round(po.top),
        element : elm
      });
    });


pH.sort(function(a, b) {
    if (a.top > b.top)
      return -1;
    if (a.top < b.top)
      return 1;
    // a doit être égale à b
    return 0;
});
var ord = {
  hasScrolled : true,
  locked : false
};
var ticker = function(){

  if(ord.hasScrolled){
    var menu = $("#prod-menu"),        
     actTop = $( window ).scrollTop(), 
     level = actTop + menu.height();
    ord.locked = true;
    ord.hasScrolled = false; 
    for(var i in pH){
      var o = pH[i];

      if(level > o.top && level < (o.top + o.element.height())){
        menu.css("top", "0");
        $("#prod-menu ul li").removeClass("sel");
        $("#prod-menu").find("a[href='#"+ o.element.attr("id") +"']").parent().addClass("sel");
        break;
      }
    }





    ord.locked = false;
  }
}

setInterval(ticker, 250);

$( window ).scroll(function() {
 ord.hasScrolled = true && !ord.locked;
  // toggle top menu


});

// animating anchor link scrolling
// snippet from css-tricks 
// css-tricks.com/snippets/jquery/smooth-scrolling

$("a[href*=#]:not([href=#])").click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top-50
        }, 700);
        return false;
      }
    }
  });

var navPanels = $();
$('#prod-menu a').each(function() {
    navPanels = navPanels.add($(this.hash));    // easy array of nav panels according to nav items
});

navPanels.each(function() {
    var $p = $(this)    // current panel in loop

    if ( $( window ).scrollTop() + $('#prod-menu').outerHeight() >= $p.offset().top) { 
        $("#prod-menu ul li").removeClass("sel");
        $('#prod-menu a').filter('[href="#'+$p.attr('id')+'"]').parent().addClass("sel");
    }
});

$(function() {
    var homeH = $( window ).height(),
        navPanels = $();

    $('#prod-menu a').each(function() {
        navPanels = navPanels.add($(this.hash));    // easy array of nav panels according to nav items
    });

    $( window ).scroll(function() {
        // toggle top menu
        if ( $( window ).scrollTop() < homeH/2) {
            $("#prod-menu ul li").removeClass("sel");
            $("#prod-menu").css("top", ($('#prod-menu').outerHeight()*-1));
        } 
        else {
            $("#prod-menu").css("top", "0");
        };

        // toggle top menu selection
        navPanels.each(function() {
            var $p = $(this)    // current panel in loop

            if ( $( window ).scrollTop() + $('#prod-menu').outerHeight() >= $p.offset().top) { 
                $("#prod-menu ul li").removeClass("sel");
                $('#prod-menu a').filter('[href="#'+$p.attr('id')+'"]').parent().addClass("sel");
            }
        });
    });

    // animating anchor link scrolling
    // snippet from css-tricks 
    // css-tricks.com/snippets/jquery/smooth-scrolling
    $("a[href*=#]:not([href=#])").click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top-$('#prod-menu').outerHeight()
                }, 700);
                return false;
            }
        }
    });
});

// toggle top menu selection
navPanels.each(function() {
    var $p = $(this)    // current panel in loop
    var viewTop = $( window ).scrollTop() + $('#prod-menu').outerHeight();
    if (viewTop  >= $p.offset().top) {
        $("#prod-menu ul li").removeClass("sel");
        if ($p.offset().top + $p.outerHeight() > viewTop) { 
            $('#prod-menu a').filter('[href="#'+$p.attr('id')+'"]').parent().addClass("sel");
        }
    }
});