我正在尝试创建一个从某个偏移开始滚动的侧边栏。我完全按照本教程:http://www.htmldrive.net/items/show/253/Floating-HTML-Menu-Using-jQuery-and-CSS
问题是,我的侧边栏根本不会让步。
任何人都知道为什么我的侧边栏不会让步?
如果您需要我的其他代码进行故障排除,请告诉我。但是,我的侧边栏代码与教程中的代码完全相同。
谢谢!
答案 0 :(得分:0)
你确定你完全遵循了它吗?你有没有包含相关的jQuery库?你使用相同版本的jQuery吗?您的菜单是否具有'floatMenu'的ID?必须有不同的东西。也许您可以发布您的代码,以便我们可以看到它?
答案 1 :(得分:0)
工作演示http://jsfiddle.net/yeyene/7G4sS/
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
<div id="floatMenu" style="top: 150px;">
<ul class="menu1">
<li><a href="#" onclick="return false;"> Home </a></li>
</ul>
<ul class="menu2">
<li><a href="#" onclick="return false;"> Table of content </a></li>
<li><a href="#" onclick="return false;"> Exam </a></li>
<li><a href="#" onclick="return false;"> Wiki </a></li>
</ul>
<ul class="menu3">
<li><a href="#" onclick="return false;"> Technical support </a></li>
</ul>
</div>
body {
background-color:#000;
width:100%;
height:2000px;
color:#ccc;
font:10px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;
}
#floatMenu {
position:absolute;
top:150px;
right:10px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li{
list-style:none;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}
#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}