页面滚动时的活动类答案

【问题标题】：Active Class while page scrolling页面滚动时的活动类
【发布时间】：2012-12-28 08:30:18
【问题描述】：

开发单个页面（正文滚动顶部动画）请先查看演示，然后查看“menu 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');
});

【问题讨论】：

你的意思是当像联系人这样的东西在滚动时出现时，联系人链接应该被激活？
是的，你是对的@ryadavilli
jquery scroll, change navigation active class as the page is scrolling, relative to sections的可能重复

标签： jquery

【解决方案1】：

虽然我理解您的问题，但您自己执行此操作可能会引发一些棘手的问题：

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

为了让您的生活更轻松，请使用jQuery Waypoints plugin 之类的名称。看看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'
});

【讨论】：

这是一个新的小提琴：jsfiddle.net/sUMaa/2——完美运行，我添加了offset: 'bottom-in-view'

【解决方案2】：

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

【讨论】：