相对于窗口的位置

Question

相对于窗口的位置

21

我有一个Tumblr账户，正在编辑它的HTML。我的问题是：如何使我的侧边栏在特定位置，并且当我向下滚动页面时，相对于浏览器保持不动？点击“提问”并查看“类似问题”的示例，然后滚动即可了解我所说的内容。我希望使用CSS完成。我已经尝试了我能想到的所有方法。

- judh1234

4个回答

5

您可以使用

标签

position:fixed

这是一个关于相同问题的jsfiddle示例http://jsfiddle.net/aBaNM/，即使你滚动页面，红色div也应该保持在原位置。

- sublime

2

点击"提出问题"并向下滚动以查看我的意思。我已经尝试了"fixed"。 - judh1234

3

我同意，使用position:fixed和top:0px以及left:0px就可以实现这个效果。但是要注意，在导航条中使用fixed定位时要小心，如果用户的屏幕比菜单还要小，那么溢出部分将无法查看。

- TorranceScott

我希望它在页面中间开始，然后在我滚动页面时固定在页面顶部。 - judh1234

我想不出一个纯CSS的方法来解决这个问题，但是waypoints js（http://imakewebthings.com/waypoints/）或skrollr（https://github.com/Prinzhorn/skrollr）可以很好地解决这个问题。当视口顶部到达元素顶部时，您只需切换到position fixed，它应该看起来像粘在顶部一样。 - TorranceScott

1

无需点击的模态层简单解决方案，将忽略父元素 position: relative;

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

将模态框设置在窗口的顶部，并覆盖整个浏览器窗口的宽度和高度，将z-index小于模态框。

- Abbos Tajimov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steven · Accepted Answer

将元素的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的

元素，并将其与左边框距离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 样式，使其margin-top:60px，删除position和margin-left 属性，然后添加display:block

理想情况下，您将只有icon、anchor3和oldurl在一个容器

中，这样您就可以在容器上使用 jQuery 而不是逐个处理这三个元素！

但是这应该可以让您获得想要的结果（在 live tumblr 网站上测试过，并使用了 FF Scratchpad）。

更新（2）

启动 Firefox 并前往页面：http://thatoneguyoveryonder.tumblr.com/，然后打开 Scratchpad（SHIFT + F4），复制/粘贴以下代码并按 CTRL+L。然后它应该会显示一些东西（在 scratchpad 中），如/* [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()
        })
    }
})