Javascript 使固定浮动元素在Firefox和Chrome中平滑滚动

我有一个脚本，它使用jQuery和CSS在页面滚动时将某些内容放置在页面顶部。然而，当你滚动时，这个条看起来好像在晃动，并且在谷歌Chrome和Mozilla Firefox中，它被固定在浏览器的顶部。为什么会这样

我希望你能理解我想描述的内容。如果没有，请将此代码与jQuery库一起复制并粘贴，以了解我的意思：

<style type='text/css'>
body {
    height:1000px;
    margin:0;
    padding:0;
}

#scroller {
    position:relative;
    top:60px;
    width:100%;
    background:#CCC;
    height:20px;
}
</style>

<script type='text/javascript'>
    $(window).load(function() {
        $(window).scroll(function() {
            if($(window).scrollTop()>60) {
              $('#scroller').css('top', $(window).scrollTop());
            }
        });
    });
</script>

<div id="scroller">Some controls</div>

身体{
高度：1000px；
保证金：0；
填充：0；
}
#卷轴{
位置：相对位置；
顶部：60px；
宽度：100%；
背景：#CCC；
高度：20px；
}
$（窗口）。加载（函数（）{
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>60）{
$（'#scroller'）.css（'top'，$（window.scrollTop（））；
}
});
});
一些控件

使用以下方法：

$(window).load(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()>60){
            $('#scroller').css('position', 'fixed');
            $('#scroller').css('top', 0);
        } else {
            $('#scroller').css('position', 'relative');
            $('#scroller').css('top', 60);
        }
    });
});

---

而不是一直操纵顶部，一旦它应该停留在顶部，将“位置”设置为“固定”，并将顶部设置为0，这样它就不必等待javascript滚动事件触发来固定位置。

还有一个jquery插件来处理这个问题。下面是一个标题的演示，它将横幅推到视图之外，然后停在页面顶部。例如，假设横幅不在那里

演示：

编辑：更新的小提琴：

用法：

$(document).ready(function() {
    $('.header').scrollToFixed();
});

插件说明如下：

此插件用于将元素固定到页面顶部，如果元素会垂直滚动出视图；但是，它确实允许元素通过水平滚动继续向左或向右移动

给定marginTop选项，一旦垂直滚动到达目标位置，元素将停止垂直向上移动；但是，当页面向左或向右滚动时，元素仍将水平移动。一旦页面向下滚动超过目标位置，元素将恢复到页面上的原始位置

该插件已经在Firefox 3/4、Google Chrome 10/11、Safari 5和Internet Explorer 8/9中进行了测试

---

插件和来源：

这里是一个示例设置：Callum，是页面重画率导致了这一点，不同的浏览器和机器会有所不同。“固定”技术通过使其位于浏览器内部而不依赖JavaScript来解决这个问题。回答得好。