0

当我移动滚动条时，我正在尝试制作一个上下移动的菜单。我离它很近，但是当它移动时它会跳动一点，菜单（div right）的移动并不顺畅。有谁知道如何改进它？

（当然不能横向移动，也不能和左边的内容重叠。请看这里的例子：http://jsfiddle.net/67ZFe/）

查询：

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

我在这里有一个例子：http: //jsfiddle.net/67ZFe/

4

2 回答 2

2

position:fixed;使用css 属性而不是使用 jQuery可能会更好、更快。

于 2012-11-22T16:08:06.803 回答
0

我可能会遗漏一些东西，但是使用固定位置的元素而不是一直移动元素不是更容易吗？

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

使用固定定位将比使用 JavaScript 解决方案顺畅得多。

我会使用类似的东西：

#right {
   position: fixed;
   top: 50px; /* Or whatever suits you */
}
于 2012-11-22T16:08:59.903 回答