【问题标题】：Jquery Floating Menu does not moveJquery浮动菜单不动
【发布时间】：2013-07-01 12:48:31
【问题描述】：

我正在尝试创建一个从某个偏移量开始滚动的侧边栏。我完全按照本教程进行操作：http://www.htmldrive.net/items/show/253/Floating-HTML-Menu-Using-jQuery-and-CSS

问题是，我的侧边栏根本不动。

有人知道为什么我的侧边栏不会移动吗？

如果您需要我的其他代码进行故障排除，请告诉我。但是，我的侧边栏代码与教程中的代码完全相同。

谢谢！

【问题讨论】：

你能用你的代码创建一个jsfiddle.net吗？

标签： jquery menu floating

【解决方案1】：

你确定你完全按照它吗？你是否包含了相关的 jQuery 库？您使用的是相同版本的 jQuery 吗？您的菜单是否有 'floatMenu' 的 ID？一定有什么不同。也许您可以发布您的代码以便我们查看？

【讨论】：

是的，我已经包含了相关的 jQuery 库，即来自演示文件的确切库。我的菜单命名正确。我的代码很长，我怎么把它贴在这里？抱歉，我第一次使用这个网站问一个问题！
剪切 n 粘贴或更好地在jsfiddle.net 开始一个新的小提琴并发布链接

【解决方案2】：

工作演示http://jsfiddle.net/yeyene/7G4sS/

JQUERY

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});
    });
});

HTML

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

CSS

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;
}

【讨论】：