4

我对 div 的位置有疑问。我希望这个 div 是相对位置，直到页面滚动了一定数量的像素。具体来说，我有一个 div(#block-menu)，它在页面下方几乎 300 像素，我希望它在到达顶部时变得固定。我试过使用这段代码，但似乎不能正常工作......

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>
4

4 回答 4

6

这是你想做的吗？

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>
于 2013-06-04T15:56:39.503 回答
0

行if($(this).scrollTop() >= 300 {缺少一个开始的右括号。

于 2013-06-04T15:48:12.877 回答
0

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

http://stickyjs.com/

于 2013-06-04T15:45:36.693 回答
0

我根据您的代码示例制作了一个工作版本：

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

简而言之，我猜你需要 a $(document).ready(function(){并且缺少一个右括号

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

应该

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

于 2013-06-04T15:53:59.643 回答