Jquery 滚动功能

当我移动滚动条时，我试图做一个上下移动的菜单。我离它很近，但当它移动时，它会有一点跳跃，菜单的移动（div right）并不平稳。有人知道如何改进吗

（当然，它不应该水平移动，也不能与左侧的内容重叠。请参见此处的示例：http://jsfiddle.net/67ZFe/)

JQUERY：

$(function(){

    $(document).scroll(function(){
        var windowTop = $(window).scrollTop();
        $('#right').css('margin-top', (windowTop)  + 'px'); 
    });

})

CSS：

body {background-color: #f2f2f2;font-size: 13px;margin: 0;padding: 0;}
#wrapper {position: relative; margin:0 auto;width:700px;height:900px;background-color:#fff;}
#right {
    position: absolute;
    top: 40px;
    right:0px;
    width:200px;
    height:200px;
    background-color: red;
}
#text {
    position: absolute;
    left: 0px;
    width:400px;
    padding:40px;
}

HTML：

<div id="wrapper">
  <div id="text"> </div>
  <div id="right"> </div>
</div>

---

我在这里举了一个例子：

使用

位置：fixed可以更好更快地完成此操作css属性而不是jQuery。
我可能遗漏了一些东西，但是使用固定位置的元素而不是一直移动元素不是更容易吗

当元素使用固定位置时，其位置是相对于浏览器窗口而不是页面确定的。因此，菜单将始终放置在相对于顶部的特定位置，例如，即使您滚动页面

使用固定定位将比使用JavaScript解决方案更加平滑

我会使用类似于：

#right {
   position: fixed;
   top: 50px; /* Or whatever suits you */
}

为什么不是纯CSS解决方案#右图{position:fixed，top:0}正如大家所说，您应该使用css。但是这里有一个有趣的动画，@ocanal:是的，固定位置是一个简单的方法，可以获得平滑的运动，但是你的解决方案非常聪明，效果非常有趣。真的很棒！如果它是固定的，它也将水平移动，并将重叠content@Nrc好吧，那么它必须相对于页面上的其他内容进行定位？在这种情况下，我相信你的解决方案会变得非常平滑。@Nrc不确定你是否更喜欢它，但你可以做一些事情，比如，当用户基本上停止滚动时，菜单会移动，而不是大量闪烁。你是对的，固定位置是最好的选择，但直到我看到给我Wes的完整解决方案，我才明白。无论如何，谢谢你。我必须做一些修改，包括在名为
right cont
的包含div中包装
right
，因为你的
左填充：500px。在他的示例中，文本只有400px宽。它工作得非常完美！我很惊讶，我认为“具有固定位置的元素是相对于浏览器窗口定位的。”但您得到的是相对于包装器的位置？我所做的是相对于浏览器窗口设置垂直定位，但没有指定任何水平定位。因此，它从包装器获得了水平定位。我很高兴它对你有用！你能接受我的回答吗？