0

我对 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>

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

4

1 回答 1

0

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

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

这是一个 jsbin。

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

于 2013-08-07T04:01:26.413 回答