如何突出显示滚动中的活动菜单项并单击？

我想添加一个类active到当前的滚动菜单项并点击。这是一个包含不同部分的单页（长）页面。当点击一个项目时，活动状态应该切换到当前状态。

我想出了下面的代码，但没有现在怎么我可以整合上面：

// Click event 
    $('#primary-navwrapper li a[href^="#"]').click(function(event) { 

     // Prevent from default action to intitiate 
     event.preventDefault(); 

     // The id of the section we want to go to 
     var anchorId = $(this).attr('href'); 

     // Our scroll target : the top position of the section that has the id referenced by our href 
     var target = $(anchorId).offset().top - offset; 
     console.log(target); 

     $('html, body').stop().animate({ scrollTop: target }, 500, function() { 
      window.location.hash = anchorId; 
     }); 

     return false; 
    });

希望有人有一个例子或一些好的建议如何做到这一点。

来源

2014-11-22 Caspert

<nav> 
    <a href="#" class="item">item</a> 
    <a href="#" class="item">item</a> 
    <a href="#" class="item">item</a> 
    <a href="#" class="item">item</a> 
</nav> 


var el = $(".item"), 
    yPos = 0; 


el.click(function(event){ 
    event.preventDefault(); 

    $(this).addClass("active").siblings().removeClass("active"); 
}); 
$(window).scroll(function(){ 

    yPos = $(this).scrollTop(); 

    //i'm almost sure that you will need to calculate offset of your section to know when to switch classes 

    if(yPos > 100){ 
     el.removeClass("active").eq(1).addClass("active"); 
    } 
    if(yPos > 200){ 
     el.removeClass("active").eq(2).addClass("active"); 
    } 
    //etc.... 
});

来源

2014-11-22 19:24:55 Smile0ff

要在click添加active类是简单的使用jQuery。你只需要这个代码在单击处理

//remove active from all anchor and add it to the clicked anchor 
     $('#primary-navwrapper li a[href^="#"]').removeClass("active") 
     $(this).addClass('active');

而且滚动部分，你需要监控的滚动条的位置，并与每一个页面像这样

//check the pages when scroll event occurs 
$(window).scroll(function(){ 
    // Get the current vertical position of the scroll bar 
    position = $(this).scrollTop(); 
    $('#primary-navwrapper li a[href^="#"]').each(function(){ 
      var anchorId = $(this).attr('href'); 
      var target = $(anchorId).offset().top - offset; 
      // check if the document has crossed the page 
     console.log(position,target); 
     if(position>=target){ 
      //remove active from all anchor and add it to the clicked anchor 
      $('#primary-navwrapper li a[href^="#"]').removeClass("active") 
      $(this).addClass('active'); 
     } 
    })

这里是一个偏移量比较演示http://jsfiddle.net/k5afwfva/

来源

2014-11-22 19:26:48 sking

如何突出显示滚动中的活动菜单项并单击？

回答

相关问题