javascript - 位置固定在某一点

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>