使用锚滚动时突出显示导航项答案

【问题标题】：Highlight Nav item when using anchor scrolling使用锚滚动时突出显示导航项
【发布时间】：2013-08-07 12:01:26
【问题描述】：

我对 jQuery 还很陌生，所以我需要有更多经验的人来帮助我。我有一个包含 3 个项目的导航 - 关于联系人的工作

默认情况下，我选择了工作，但我希望它将活动类更改为曾经被点击过的类。我有锚滚动工作，但我想让它在单击时突出显示到正确的导航项。此外，如果向下滚动页面并进入下一部分时可以自动更改突出显示。

这是我用于锚点滚动的 jQuery。

    <script>$(function() {
    var main-nav = $("#main-nav"), pos = main-nav.offset();
    $(window).scroll(function() { 
        if($(this).scrollTop() > (pos.top + 10) && $(this).scrollTop() < 15000 && main-nav.css('position') == 'static') { main-nav.addClass('fixed');  } 
        else if($(this).scrollTop() <= pos.top && main-nav.hasClass('fixed')){ main-nav.removeClass('fixed'); }
        else if($(this).scrollTop() > 15000 && main-nav.hasClass('fixed')){ main-nav.removeClass('fixed'); }
        })
    });
    </script>
    <script>$(function() {
            $('ul.nav a').bind('click',function(event){
                var $anchor = $(this);

                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1500,'easeInOutExpo');
                /*
                if you don't want to use the easing effects:
                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1000);
                */
                event.preventDefault();
            });
        });
    </script>

这里是 CSS

    #main-nav{
      font: bold 12px 'Bitter', serif;
      width: 145px;
      float: right;
    }
    #main-nav li{
      float: left;
      list-style: none;
      margin: 10px 2px 0 2px;
      color: #c4c5c5;
    }
    #main-nav li:last-child{
      margin-right: 0;
    }
    #main-nav a{
      text-decoration: none;
      color: #c4c5c5;
    }
    #main-nav a:hover{
      text-decoration: none;
      color: #919292;
    }
    #main-nav a.active{
      color: #919292;
    }

这里是 HTML

    <div id="main-nav" class="">
                <ul class="nav">
                    <li><a class="active" href="#work">Work</a></li>
                    <li>/</li>
                    <li><a href="#anchor-about">About</a></li>
                    <li>/</li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>

如果有人可以帮助我，我将非常感激！

【问题讨论】：

标签： anchor highlight

【解决方案1】：

由于您使用active 类来指定应突出显示哪个锚点，您只需确保正确的锚点具有该类。修复点击导航项目时的问题很简单，在您的$('ul.nav a').bind 添加：

  $('ul.nav a').removeClass('active');
  $(this).addClass('active');

Here is a jsbin.

要在页面滚动时突出显示导航，您只需将页面的 scrollTop 与 DOM 中元素的偏移量进行比较...类似于您当前在 $(window).scroll 中的代码。

【讨论】：