javascript 使固定浮动元素在 Firefox 和 Chrome 中平滑滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6984580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making Fixed floating element scrolling smoothly in Firefox and Chrome
提问by Callum Whyte
I have a script that uses jQuery and CSS to position something at the top of the page when it scrolls. However, the bar looks like it's shaking when you scroll and it has been fixed to the top of the browser in Google Chrome and Mozilla Firefox. Why could this be?
我有一个脚本，它使用 jQuery 和 CSS 在页面滚动时将某些内容定位在页面顶部。但是，滚动条看起来像是在晃动，并且它已固定在 Google Chrome 和 Mozilla Firefox 中的浏览器顶部。为什么会这样？
I hope you can understand what I'm trying to describe. If not, copy and paste this code along with a jQuery library to see what I mean:
我希望你能理解我要描述的内容。如果没有，请复制并粘贴此代码以及 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>
回答by nwellcome
Use this:
用这个：
$(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/
http://jsfiddle.net/nwellcome/6PGZE/1/
Rather than manipulating the top all the time, once it's supposed to stay at the top set "position" to "fixed" and top to 0, that way it doesn't have to wait for the javascript scroll event to fire to fix the position.
而不是一直操纵顶部，一旦它应该停留在顶部，将“位置”设置为“固定”并将顶部设置为 0，这样它就不必等待 javascript 滚动事件触发来修复位置.
回答by bigspotteddog
There is also a jquery plugin that takes care of this. Here is a demo of a header that pushes a banner up out of view then stops at the top of the page. For your example, pretend the banner is not there.
还有一个 jquery 插件可以解决这个问题。这是一个标题的演示，它将横幅推到视野之外，然后停在页面顶部。对于您的示例，假设横幅不在那里。
Demo: http://jsfiddle.net/ZczEt/
演示：http: //jsfiddle.net/ZczEt/
Edit: Updated fiddle: http://jsfiddle.net/ZczEt/2180/
编辑：更新小提琴：http: //jsfiddle.net/ZczEt/2180/
Usage:
用法：
$(document).ready(function() {
$('.header').scrollToFixed();
});
The description of the plugin is as follows:
插件说明如下：
This plugin is used to fix elements to the top of the page, if the element would have scrolled out of view, vertically; however, it does allow the element to continue to move left or right with the horizontal scroll.
此插件用于将元素固定到页面顶部，如果元素会垂直滚动到视图之外；但是，它确实允许元素随着水平滚动继续向左或向右移动。
Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.
给定一个选项 marginTop，一旦垂直滚动到达目标位置，元素将停止垂直向上移动；但是，当页面向左或向右滚动时，元素仍将水平移动。一旦页面向下滚动超过目标位置，元素将恢复到页面上的原始位置。
This plugin has been tested in Firefox 3/4, Google Chrome 10/11, Safari 5, and Internet Explorer 8/9.
此插件已在 Firefox 3/4、Google Chrome 10/11、Safari 5 和 Internet Explorer 8/9 中测试。
Plugin and source: https://github.com/bigspotteddog/ScrollToFixed
