kswedberg jquery 平滑滚动插件 - 突出显示链接并删除滚动上的突出显示？

Question

我使用 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");
        });
    }
});
 });

但是有时单击链接不会改变其颜色，但再次单击它会改变它的颜色。我认为 Scroll 之后触发的不同函数并不总是按顺序运行。如果这是问题所在，我该如何让他们这样做？

谢谢

Answer 1

这是一个老问题，但我认为提到 jQuery Waypoints 可能会很有用，它正是您所追求的（并且显然是基于 jQuery 的）。非常有用的插件，你可以在这里找到它。