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

Question

我有一个脚本,当它滚动时,使用jQuery和CSS在页面顶部定位一些东西.但是,滚动时条形图看起来很震动,并且已经固定在Google 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>

Answer 1

用这个:

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

http://jsfiddle.net/nwellcome/6PGZE/1/

一旦它应该保持在顶部设置"位置"到"固定"并且顶部为0,而不是一直操纵顶部,那么它不必等待javascript滚动事件触发来修复位置.