相对于窗口的位置

Question

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

Answer 1

将元素css position属性设置为fixed和user top/ left并将margin其放置在您希望的位置.像这样:

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

上面的代码将垂直居中一个200px高div并将其10px从左边框放置.

UPDATE

这个例子将向您展示如何实现您的目标! 用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()
        })
    }    
})

您需要更改CSS的a3text做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 也应该放在那里。