0

我为同一页面链接使用 Karl Swedberg 的 jquery 平滑滚动插件： https ://github.com/kswedberg/jquery-smooth-scroll

链接具有固定位置，因此它们始终可见。我希望在您单击链接后突出显示链接，但是当您滚动页面时要删除突出显示（因为您可能不再位于链接对应的部分）。

让链接在点击时改变颜色很简单。但是，随着插件本身的滚动，滚动时移除颜色会更加困难。我试过这段代码：

$(document).ready(function() {
$('#scrollcontrolls a').smoothScroll(
    {
    afterScroll: function() { 
        $(window).scroll(function () { 
            $("#scrollcontrolls a").css("color", "black");
        });

    }
});
});

$(document).ready(function() {
$('#scrollcontrolls a').click(function() {
    $(this).css('color','red');
});
});

问题是一旦窗口滚动功能被初始化，它就会在平滑滚动插件滚动页面时触发。这意味着在您单击一个链接后，它将始终覆盖单击时应用于链接的颜色，因此单击其他链接不会改变它们的颜色。

谢谢

编辑-我制作了一个可以使用以下代码的版本：

 $(window).bind('scroll', function () { 
$("#scrollcontrolls a").css("color", "black");
 });

 $(document).ready(function() {
$('#scrollcontrolls a').smoothScroll(
    {
    afterScroll: function() { 
        $(window).unbind();
        $(this).css('color','red');
        $(window).bind('scroll', function () { 
            $("#scrollcontrolls a").css("color", "black");
        });
    }
});
 });

然而，有时点击链接不会改变它的颜色，但再次点击它会。我认为 afterScroll 触发的不同功能并不总是按顺序运行。如果这是问题所在，我该如何让他们这样做？

谢谢

4

1 回答 1

0

这是一个老问题，但认为提及jQuery Waypoints可能很有用，它完全符合您的要求（并且显然是基于 jQuery 的）。非常有用的插件，你可以在这里找到它。

于 2011-07-11T18:33:35.253 回答