18

我有一个 Tumblr 帐户，我正在编辑它的 html。我的问题是：如何让我的侧边栏处于某个位置，然后我在页面上向下滚动，它保持在相对于我的浏览器的位置？有关我正在谈论的示例，请单击“提出问题”并查看“类似问题”，然后滚动。我希望它在 CSS 中。我已经尝试了我能想到的一切。

4

4 回答 4

36

将元素 cssposition属性设置为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从左侧边框放置。

更新

这个例子将向您展示如何实现您所追求的！ 使用 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 更改为 make margin-top:60px，删除positionandmargin-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()
        })
    }
})
于 2013-07-11T22:13:38.947 回答
5

您可以使用

position:fixed

这是同一个http://jsfiddle.net/aBaNM/的 jsfiddle ，即使您滚动正文，红色 div 也应该定位在那里。

于 2013-07-11T22:10:23.963 回答
3

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

于 2013-07-11T22:17:14.190 回答
0

模态层的简单解决方案（对于没有点击），将忽略父位置：相对；

.layer-without-click-element {
  transform: translate(0%, 0%);
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}

占据窗口的顶部，左侧 0 并覆盖整个宽度和高度浏览器窗口大小，将z-index设置为小于模态。

于 2022-03-02T23:28:38.037 回答