Question

我有一个Tumblr帐户，我正在编辑它的html。我的问题是：如何让我的侧栏位于某个位置，然后我向下滚动页面，它保持在相对于我的浏览器的位置？举一个我正在谈论的例子，点击“提问”并查看“类似问题”然后滚动。我更喜欢它在CSS中。我已经尝试过我能想到的一切。

Answer 1

将元素css position属性设置为fixed，将用户top / left和margin设置为您想要的位置。像这样：

#sideBar {
    position: fixed;
    display: block;
    top: 50%;
    left: 10px;
    margin: -100px 0 0 0;
    height: 200px;
    width: 50px;
}

上面的代码会垂直居中200px高div，并将其从左边框放置10px。

<强>更新

此示例将向您展示如何实现您所追求的目标！ Demo with jquery

更新（1）

以下jquery代码可能是通过对其他html / css进行最小更改来实现所需内容的最快方法。只需将以下代码粘贴在文档就绪函数中，并按如下所述更改css的几位。

$(window).scroll(function(){
    if($(window).scrollTop() >= 200){
        $('anchor3').css({
            "margin-top": "80px"
        })
        $('icon').css({
            "margin-top": "10px"
        })
        $('oldurl').css({
            "margin-top": "296px"
        })
    }
    else{
        $('anchor3').css({
            "margin-top": 300 - $(window).scrollTop()
        })
        $('icon').css({
            "margin-top": 230 - $(window).scrollTop()
        })
        $('oldurl').css({
            "margin-top": 516 - $(window).scrollTop()
        })
    }    
})

您需要更改 a3text 的CSS才能生成margin-top:60px，删除position和margin-left属性，然后添加display: block

理想情况下，您只需在一个容器icon中包含anchor3，oldurl和div，这样您就可以在容器上使用jquery而不是三个项目单独！

但是这应该能让你得到你想要的东西（用FF Scratchpad在现场tumblr网站上测试）。

更新（2）

启动firefox并转到页面：http://thatoneguyoveryonder.tumblr.com/然后打开暂存器（SHIFT + F4）复制/粘贴以下代码并按CTRL + L.然后它应该说出一些内容（在暂存器中），如/* [object Object] */如果发生这种情况，请向下滚动网页并观看魔术发生 - 如果这就是您之后我将解释为您实施的内容：）

$('#sidebar').css({
    position:'fixed',
    top:410,
    left:700 + 60 + (($(window).width()-940) / 2),
    "z-index":900
});

$(window).scroll(function(){
    if($(window).scrollTop() >= 370){
        $('#sidebar').css({
            top: '30px'
        })
    }
    else{
        $('#sidebar').css({
            top: 410 - $(window).scrollTop()
        })
    }
})

Answer 2

您可以使用

position:fixed

这是同一个http://jsfiddle.net/aBaNM/的jsfiddle，即使你滚动身体，红色div也应该放在那里。

Answer 3

我同意，位置：固定顶部：0px和左：0px应该这样做。使用固定定位进行导航时要小心，如果用户的屏幕比菜单小，你将永远无法看到溢出。

相对于窗口的位置

3 个答案: