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

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

然后，我来了解这个解决方案：将带有绝对定位的侧边栏放在另一个相对定位的容器中，然后使用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而不排队计算您的位置。这可能看起来更顺畅

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

1 个答案: