固定在某个点的位置

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

来源

2013-06-04 user2183604

“但似乎并没有正常工作......” 这意味着??? –

我不知道，它看起来像不应该，因为它应该，我想..我试图理解，因为我可以;）谢谢 – user2183604

为什么不使用一个已经工作并且已经在所有浏览器中测试过的插件，要做到这一点？

http://stickyjs.com/

来源

2013-06-04 15:45:36

如何使用此插件？这将是完美的，我不知道它..谢谢:) – user2183604

我试过使用这个插件，但没有.. – user2183604

我想与插件，但没有，我已经添加了这两行代码head： – user2183604

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

来源

2013-06-04 15:48:12 chead23

谢谢，我在“300”之后加了括号，但仍然没有任何内容 – user2183604

当你什么都没说时，你的意思是什么？页面上是否有任何JS错误？ – chead23

没有错误，只是div保持相对位置，没有别的 – user2183604

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

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

总之，我猜你需要一个 $(document).ready(function(){和失踪闭括号

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

应该是

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

来源

2013-06-04 15:53:59 DaveHogan

试过了，没什么，我把这段代码放在页面头部的标记脚本语言text/javascript之间......出了什么问题？ – user2183604

上面的jsfiddle工作。这是你的网页上的其他内容。我认为你可以看到它在jsFiddle中工作？浏览器控制台/错误日志中是否有错误？ – DaveHogan

这是你想要做的吗？

http://jsfiddle.net/vyHQC/

$(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-04 15:56:39 hyperdrive

是你的例子是完美的，我试图复制和过去的代码，但它仍然无法正常工作：/ – user2183604

你可以显示你如何试图实现这个代码。 – hyperdrive

我刚刚在脚本标记之间复制并过去了代码 – user2183604

固定在某个点的位置

回答

相关问题