javascript 位置固定在某个点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16922045/
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 fixed on a certain point
提问by giovanni
i'm having trouble with the position of a div. I'd like this div to be position relative until the page has been scrolled for a certain amount of pixels. In details I have a div(#block-menu) that is almost 300px down the page, I want it to become fixed when it hits the top. I've tried using this code, but doesn't seem to work properly...
我在 div 的位置上遇到了问题。我希望这个 div 是相对位置，直到页面滚动了一定数量的像素。详细地说，我有一个 div(#block-menu) 在页面下方几乎 300px，我希望它在到达顶部时固定。我试过使用此代码，但似乎无法正常工作...
var header = $("#block-menu");
$(document).scroll(function(e) {
if($(this).scrollTop() >= 300 {
header.css({position: "fixed", "top" : "0"});
} else {
header.css("position", "relative");
}
});
</script>`
the CSS:
CSS：
#block-menu {
background: rgb(27, 85, 131);
position: relative;
}
the HTML:
HTML：
<div id="#first-block" height="100px"></div>
<div id="second-block" height="200px"></div>
<div id="block-menu"></div>
<div id="container"></div>
回答by hyperdrive
Is this what your trying to do?
这是你想要做的吗？
JS
JS
$(document).scroll(function() {
var y = $(document).scrollTop(),
header = $("#block-menu");
if(y >= 300) {
header.css({position: "fixed", "top" : "0", "left" : "0"});
} else {
header.css("position", "relative");
}
});
CSS
CSS
body {
margin: 0;
}
#block-menu {
background: rgb(27, 85, 131);
position: relative;
height: 200px;
width: 100%;
}
#first-block {
height: 300px;
width: 100%;
background: orange;
}
#second-block {
height: 2000px;
width: 100%;
background: purple;
}
HTML
HTML
<div id="first-block"></div>
<div id="block-menu"></div>
<div id="second-block"></div>
回答by Vinícius Moraes
Why not use a plugin that already work and is already tested in all browsers, to do that?
为什么不使用已经可以工作并且已经在所有浏览器中测试过的插件来做到这一点呢？
回答by chead23
Line if($(this).scrollTop() >= 300 {is missing a close bracket for a start.
Lineif($(this).scrollTop() >= 300 {缺少一个右括号作为开始。
回答by Dave Hogan
I've made a working version based on your code example:
我已经根据您的代码示例制作了一个工作版本：
http://jsfiddle.net/DaveHogan/76kdr/2
http://jsfiddle.net/DaveHogan/76kdr/2
In short, I'm guessing you needed a
$(document).ready(function(){and missing a close bracket
简而言之，我猜你需要一个
$(document).ready(function(){并且缺少一个右括号
if($(this).scrollTop() >= 300 {
if($(this).scrollTop() >= 300 {
should be
应该
if($(this).scrollTop() >= 300) {
if($(this).scrollTop() >= 300) {
