Question

我想创建一个位于我页面上的菜单，当浏览器窗口到达菜单顶部时，我希望它固定在页面顶部，并向下滚动页面，如{{3}但是，代码在该链接上工作，但在我实现进入我的网页时不起作用。也许我正在犯一个简单的错误，这就是我实现代码的方式。

主管部分：

...
<script type='text/javascript'>
$(window).load(function(){
$(window).scroll(function(){
if ($(window).scrollTop() >= 200)
{
    $("#floatbar").css({position:'fixed',left:'0',top:'0'});
}
else
{
    $("#floatbar").css({position:'absolute',left:'0',top:'200px'});
}
});
});
</script>
...

身体部分：

...
<div style="height:1000px;width:500px;">

<div id="floatbar" style="background:gray;
                            width:200px;
                            height:40px;
                            position:absolute;
                            left:0;top:200px;">
 <a href="#issue49">Issue 49</a><br />
 <a href="#issue48">Issue 48</a><br />
 <a href="#issue47">Issue 47</a><br />
 <a href="#issue46">Issue 46</a><br />
 </div>
 </div>
 ...

任何人都可以告诉我什么是错的，或者建议任何关于为什么这不起作用的想法，将无法在Dreamweaver实时视图，Mac上的safari，mac上的firefox或mac上的chrome上工作。

由于

乔恩

Answer 1

一次检查..

$("#floatbar").css({position:'fixed',left:'0',top:'0',overflow:'hidden'});

Answer 2

尝试本教程，这是我学习的方法：

http://www.bennadel.com/blog/1810-Creating-A-Sometimes-Fixed-Position-Element-With-jQuery.htm

Answer 3

我根本不加载jQuery - Jon 凯特

那么你有问题。你在这里有jQuery代码，没有jQuery就无法工作。

在脚本之前将其粘贴到某处：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$(window).scroll(function(){
if ($(window).scrollTop() >= 200)
{
    $("#floatbar").css({position:'fixed',left:'0',top:'0'});
}
else
{
    $("#floatbar").css({position:'absolute',left:'0',top:'200px'});
}
});
});
</script>

并且魔法会发生：）

Javascript浮动菜单栏，不工作？

3 个答案: