jquery - 页面滚动时的活动类

Question

开发单个页面（正文滚动顶部动画）请先查看演示，然后查看“菜单 li a”上的添加/删除活动类 http://jsfiddle.net/sUMaa/1/

一切都很好，但只有一个问题当我们用鼠标滚动页面时需要相同的活动类功能

jQuery('ul li a').click(function(){
        var idName = jQuery(this).attr('href');
        var idNameFixTop =  jQuery(idName).offset().top; 
        jQuery('html, body').animate({scrollTop:idNameFixTop}, 1000);

        jQuery('ul li a').removeClass('active');
        jQuery(this).addClass('active');
});

Answer 1

无论哪种方式，您都可以使用twitter bootstrap Scrollspy，工作正常:)

Answer 2

尽管我了解您的问题，但您自己实施此操作可能会引发一些棘手的问题：

• 在将导航元素设置为活动之前，应该有多少元素可见
• 当前可见多个元素时要突出显示的内容

为了让您的生活更轻松，请使用jQuery Waypoints 插件之类的东西。看看Docs，你几乎可以控制一切。

您的代码示例：

$('div').waypoint(function() {
  $('ul li a').removeClass('active');
  var currentIndex = $('div').index($(this));
  $('ul li:eq(' + currentIndex + ') a').addClass('active');
},
{
  offset: 'bottom-in-view'
});