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

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

谢谢

Answer 1

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

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

1 个答案: