使用锚点滚动时突出显示导航项目

当谈到jQuery时，我很新，所以我需要有更多经验的人来帮助我。我有一个Nav有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>

如果有人能帮助我，我真的很感激！

来源

2012-09-01 GabbyV

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

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

Here is a jsbin。

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

来源

2013-08-07 04:01:26 beaslera

使用锚点滚动时突出显示导航项目

回答

相关问题