Html 相对于窗口的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17604311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position Relative to the window
提问by judh1234
I have a Tumblr account and I'm working on editing the html of it. My question is this: how do I make my side bar be in a certain position but then I scroll down on the page, it stays where it is relative to my browser? For an example of what I'm talking about, click "ask a question" and look at "similar questions" then scroll. I would prefer for it to be in CSS. I have already tried everything I can think of.
我有一个 Tumblr 帐户，我正在编辑它的 html。我的问题是：如何使我的侧边栏位于某个位置，但随后我在页面上向下滚动，它会停留在相对于我的浏览器的位置？对于我正在谈论的示例，请单击“提问”并查看“类似问题”，然后滚动。我更喜欢它在 CSS 中。我已经尝试了所有我能想到的。
回答by Steven
set the elements css positionattribute to fixedand user top/leftand marginto place it where you want it to be. Like so:
将元素 cssposition属性设置为fixed和 user top/left并将margin其放置在您想要的位置。像这样：
#sideBar {
position: fixed;
display: block;
top: 50%;
left: 10px;
margin: -100px 0 0 0;
height: 200px;
width: 50px;
}
The above code would vertically center a 200pxhigh div and place it 10pxfrom the left hand border.
上面的代码将垂直居中一个200px高 div 并将其10px从左侧边框放置。
UPDATE
更新
This example will show you how to achieve what you're after! Demo with jquery
此示例将向您展示如何实现您所追求的目标！ 使用 jquery 演示
Update (1)
更新 (1)
The following jquery code is probably the fastest way to achieve what you want with minimal changes to other html/css. Just stick the following code in a document readyfunction and change the few bits of css as stated below.
以下 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()
})
}
})
You need to change the CSS for a3textto make margin-top:60px, remove the positionand margin-leftattributes, then add display: block
您需要将a3text的 CSS更改为 make margin-top:60px，删除position和margin-left属性，然后添加display: block
Ideally, you would just have icon, anchor3, and oldurlinside one container divso that you could just use jquery on the container rather than the three items individually!
理想情况下，你只会有icon，anchor3和oldurl一个容器内div，这样你可以只使用jQuery的容器上，而不是单独的三个项目！
But this ought to get you what you're after (tested on the live tumblr site with FF Scratchpad).
但这应该能让你得到你想要的（使用 FF Scratchpad 在实时 tumblr 站点上测试）。
UPDATE (2)
更新 (2)
Launch firefox and go to the page: http://thatoneguyoveryonder.tumblr.com/then open scratchpad (SHIFT + F4) copy/paste the following code and press CTRL+L. It should then say something (in scratchpad) like /* [object Object] */If that happens scroll down the webpage and watch the magic happen - if this is what you're after I'll explain implementing it for you :)
启动 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()
})
}
})
回答by sublime
You can use
您可以使用
position:fixed
Here is a jsfiddle for the same http://jsfiddle.net/aBaNM/, even if you scroll the body, red div should be positioned there.
这是同一个http://jsfiddle.net/aBaNM/的 jsfiddle ，即使你滚动身体，红色 div 也应该放在那里。
回答by TorranceScott
I agree, position:fixed with top:0px and left:0px should do it. Be careful using fixed positioning for navigation though, If the user's screen is smaller than the menu, you'll never be able to see the overflow.
我同意， position:fixed with top:0px 和 left:0px 应该这样做。小心使用固定定位进行导航，如果用户的屏幕小于菜单，你将永远无法看到溢出。
