相对于窗口的位置

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 进行最少的更改。只需将以下代码粘贴到 document ready 函数中，并按如下所述更改 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，而不是单独使用这三个项目！

但这应该能让你得到你所追求的（在现场 tumblr 网站上使用 FF Scratchpad 进行测试）。

更新（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

我同意，position:fixed with top:0px 和 left:0px 应该这样做。不过要小心使用固定定位进行导航，如果用户的屏幕小于菜单，您将永远无法看到溢出。