Question

当我移动滚动条时，我正在尝试上下移动的菜单。我接近它但是当它移动时它会跳跃一点，菜单的移动（右边的）是不平滑的。谁知道如何改进它？

（当然它不应该水平移动，也不能与左边的内容重叠。请看这里的例子：http：//jsfiddle.net/67ZFe/）

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

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

Answer 1

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

Answer 2

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

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

使用固定定位将比使用JavaScript解决方案更加顺畅。

我会使用类似的东西：

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

滚动功能

2 个答案: