Question

我遇到了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>`

CSS：

#block-menu {
    background: rgb(27, 85, 131);
    position: relative;
}

HTML：

<div id="#first-block" height="100px"></div>
<div id="second-block" height="200px"></div>
<div id="block-menu"></div>
<div id="container"></div>

Answer 1

这是你想要做的吗？

http://jsfiddle.net/vyHQC/

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

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

<div id="first-block"></div>
<div id="block-menu"></div>
<div id="second-block"></div>

Answer 2

为什么不使用已经运行且已经在所有浏览器中测试的插件来做到这一点？

http://stickyjs.com/

Answer 3

线if($(this).scrollTop() >= 300 {缺少一个开始的近距离支架。

Answer 4

我根据您的代码示例创建了一个可用的版本：

http://jsfiddle.net/DaveHogan/76kdr/2

总之，我猜你需要一个 $(document).ready(function(){并遗漏了一个小括号

if($(this).scrollTop() >= 300 {

应该是

if($(this).scrollTop() >= 300) {

位置固定在某一点上

4 个答案: