13

http://jsfiddle.net/motocomdigital/gUWdJ/


我正在使用 jquery 滚动技术，我想适应我的项目。

请在此处将我的项目示例视为小提琴http://jsfiddle.net/motocomdigital/gUWdJ/

目前，您可以看到我的导航链接自动为相对于<section>'s 的滚动设置动画。

我的问题是，使用该方法，当部分到达窗口顶部时$(window).scroll，如何.active向我添加一个类？nav a

因此，例如，如果用户向下滚动页面（而不是导航链接），我希望将活动类添加为相对导航链接。指示您在页面上的位置。

每次我猜测用户向下滚动页面时，都必须删除活动类然后添加。

此外，您还必须考虑固定导航栏的 28px 高度，偏移顶部窗口。


任何人都可以向我展示一种我可以尝试使用或适应的技术，或者使用我的 jsfiddle 向我展示 :)


任何帮助将不胜感激，在此先感谢！


http://jsfiddle.net/motocomdigital/gUWdJ/


在此处输入图像描述

4

3 回答 3

45

如果您想要更通用的功能：

看演示

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        $('nav').addClass('fixed');
        $('.wrapper section').each(function(i) {
            if ($(this).position().top <= windscroll - 100) {
                $('nav a.active').removeClass('active');
                $('nav a').eq(i).addClass('active');
            }
        });

    } else {

        $('nav').removeClass('fixed');
        $('nav a.active').removeClass('active');
        $('nav a:first').addClass('active');
    }

}).scroll();​
于 2013-01-04T17:10:15.913 回答
7

你可以这样做：http: //jsfiddle.net/gUWdJ/1/

$(window).scroll(function() {

    if ($(this).scrollTop() < $('section[data-anchor="top"]').offset().top) {
       $('nav a').removeClass('active');
    }

    if ($(this).scrollTop() >= $('section[data-anchor="top"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(0)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="news"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(1)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="products"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(2)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="contact"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(3)').addClass('active');
    }

});
于 2013-01-04T17:06:13.560 回答
0

我继续修改了 A. Wolf 的脚本，因为我需要确保我的菜单项以负的顶部差异而不是 0 点亮。这比创建一个单独的函数要好得多，并且避免了创建一个每个菜单项的单击事件。我还将修改此脚本以考虑菜单中的最后一项，如果倒数第二项是，它应该自动突出显示。我想我的非常相似但不同，因为我在我的主要突出功能之外处理了我的每个循环。我的修改的另一个好处是考虑到在菜单项内的链接中包含图像，并考虑到元素的高度以及该元素的底部何时到达页面顶部，这是突出显示的时间在一个新的开始之前结束。

function highlight(item)
{
var itemTop = jQuery(item).position().top;

var windowTop = jQuery(window).scrollTop(); 
var topDifference = (windowTop - itemTop); 

var itemHeight = jQuery(item).height();
var bottomDifference = topDifference - itemHeight; 

var menuId = jQuery('#nav-icons li a').attr('href');
if (menuId = item)
{
    if(topDifference > -1 && bottomDifference < 0)
    {
        jQuery("#nav-icons li a[href='" + item + "']").parent().addClass('active');
        jQuery("#nav-icons li a[href!='" + item + "']").parent().removeClass('active');
    }
    else {
        jQuery("#nav-icons li a[href='" + item + "']").parent().removeClass('active');
    }
}
}
jQuery('#nav-icons li a').each(function(){
var eachAttr = jQuery(this).attr('href');
highlight(eachAttr);
});
于 2014-10-15T15:31:04.807 回答