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

【问题标题】：Making Fixed floating element scrolling smoothly in Firefox and Chrome使固定浮动元素在 Firefox 和 Chrome 中平滑滚动
【发布时间】：2011-10-22 12:16:06
【问题描述】：

我有一个脚本，它使用 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>

【问题讨论】：

这里是设置的例子：jsfiddle.net/nwellcome/6PGZE

标签： javascript html css firefox google-chrome

【解决方案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 滚动事件触发固定位置。

【讨论】：

Callum，这是导致此问题的页面重绘率，它与浏览器到浏览器和机器到机器不同。 “固定”技术通过将其置于浏览器内部而不依赖于 JavaScript 来解决这个问题。很好的答案。

【解决方案2】：

还有一个 jquery 插件可以解决这个问题。这是一个标题的演示，它将横幅向上推到视野之外，然后停在页面顶部。以您的示例为例，假设横幅不存在。

演示：http://jsfiddle.net/ZczEt/

编辑：更新小提琴：http://jsfiddle.net/ZczEt/2180/

用法：

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

插件说明如下：

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

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

此插件已在 Firefox 3/4、Google Chrome 10/11、Safari 5 和 Internet Explorer 8/9 中测试。

插件和来源：https://github.com/bigspotteddog/ScrollToFixed

【讨论】：