按部分更改活动导航的下划线答案

【问题标题】：change underline of active nav by section按部分更改活动导航的下划线
【发布时间】：2013-10-31 02:55:55
【问题描述】：

所以我遇到了两个问题，但解决了第一个问题。第一个是在给定的 div（或者在本例中为 div 的高度）之后让导航栏保持粘性。无论如何，我现在遇到的问题是如何让导航链接在活动部分上加下划线或更改颜色。即，如果我在第一部分，导航栏上的第一个链接带有下划线，当我向下滚动时，相应的链接和部分也会发生同样的情况。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $(window).scroll(function () { 
      if ($(window).scrollTop() > 550) {
        $('#nav_bar').addClass('navbar-fixed');
      }
      if ($(window).scrollTop() < 551) {
        $('#nav_bar').removeClass('navbar-fixed');
      }
    });
  });
</script>

<div id="page">
  <!--top section-->
  <section id="first">
    <div class="top headline"><img src="" alt="Logo"></div>
    <div class="top-with">with</div>
    <div class="max-top"><img src="" alt="Logo"></div>
  </section>
</div>

<!-- fixed nav-bar -->
<div id='nav_wrapper'>
  <nav id='nav_bar'>
    <ul id='nav_links'>
      <img src="" alt="max-logo"> 
      <li class="active">
        <li><a href="#first">1</a></li>
        <li><a href="#second">2</a></li>
        <li><a href="#third">3</a></li>
        <li><a href="#fourth">4</a></li>
        <li><a href="#fifth">5</a></li>
      </li>
    </ul>
  </nav>
</div>

【问题讨论】：

你能解释更多吗？也许是一个 jsfiddle？
我强烈建议您查看引导 css 库。这一切都是为你完成的。
你应该给我们带来一把小提琴来帮助你

标签： javascript jquery html css

【解决方案1】：

我想我明白你想要做什么，我最近遇到了同样的问题。

您需要将每个部分的$(document).scrollTop() 与$(section).offset().top 进行比较。获得活动部分的 ID 后，找到具有相同 href 的 <a> 以应用一些突出显示。

$(document).scroll(function(){
    var st = $(this).scrollTop();

    $(section).each(function() {
        if(st > $(this).offset().top && st <= $(this).offset().top + $(this).height() ){                    
            var id = $(this).attr('id');
            $('a[href="#'+id+'"]').addClass('active');
        }else{
            var id = $(this).attr('id');
            $('a[href="#'+id+'"]').removeClass('active');   
        }   
    });

});

您可以查看我的fiddle

【讨论】：