使用 jQuery 滚动更新位置使元素闪烁

Question

>我有一个侧边栏，我想在用户向下滚动到消失点后立即粘贴在右侧。我第一次尝试这样做看起来像：

$(window).scroll(function(){
    if($(window).scrollTop() >= 524){
    if(!$(".page #sidebar").hasClass("sticky")){
        $(".page #sidebar").addClass("sticky");
    }
    }
    else{
    if($(".page #sidebar").hasClass("sticky")){
        $(".page #sidebar").removeClass("sticky");
    }
    }
});

类粘滞有一个具有top和right值的position: fixed，因此它将正确保留在浏览器窗口中。唉，当我在测试时，我意识到了这个错误：作为屏幕右侧的侧边栏，如果我将浏览器窗口的大小调整到低于我正在使用的分辨率，当然，侧边栏会相对于浏览器窗口停留在那里。

然后

，我提出了这个解决方案：将具有绝对定位的侧边栏放在另一个相对定位的容器中，然后使用 javascript 计算其位置。除了（我认为）不必要的沉重之外，此解决方案有效，但由于.scroll事件触发速度不够快，使元素闪烁。代码如下：

$(window).scroll(function(){
    if($(window).scrollTop() >= 524){
    if(!$(".page #sidebar").hasClass("sticky")){
        $(".page #sidebar").addClass("sticky");
    }
    else{
        $(".page #sidebar").css("top",$(window).scrollTop()-524+"px");
    }
    }
    else{
    if($(".page #sidebar").hasClass("sticky")){
        $(".page #sidebar").removeClass("sticky");
    }
    }
});

您可以在以下位置查看实时示例： http://www.onewayitalia.it/agenzia-di-comunicazione/web-agency-per-la-realizzazione-di-siti-e-portali-internet/

有趣的是，当我写这篇文章时，我意识到stackoverflow正在做我想用类似问题侧边栏完成的同样的事情;它似乎也使用固定的位置，并且不会在窗口调整大小时中断。有什么见解吗？

Answer 1

您可以尝试 $.animate 而不排队计算出的位置。 这可能看起来更流畅