0

我有一个侧边栏，只要用户向下滚动到它会消失的位置，我就想将它贴在右侧。我第一次尝试这样做看起来像：

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

类sticky有position: fixedatop和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正在做我想要通过类似问题侧边栏完成的事情；它似乎也使用固定定位并且不会在调整窗口大小时中断。有什么见解吗？

4

1 回答 1

0

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

于 2012-07-06T17:51:20.707 回答