我试图让内容块始终显示给用户，即使他向下滚动页面也是如此。他还应该能够上下滚动内容块。这是一个带有精简版本的小提琴，向您展示我的意思：
向下滚动时要注意，直到到达红色块的底部，它才会将块固定在窗口上，向上滚动时，它会放回原处。
在 Firefox 中可以上下滚动，上面描述的固定/取消固定是难以察觉的 - 光滑如丝。
但是，一旦尝试在 Chrome 或 IE 中滚动，滚动事件似乎滞后并且可以看到块“故障”一秒钟。这不是代码延迟——这似乎是浏览器的问题。
有没有什么办法解决这一问题？我已经无计可施了。
我很感激有关如何以不同方式实现相同效果的建议......谢谢
由于 JavaScript 在与 UI 相同的线程中运行，滚动事件回调可能会阻塞 UI 线程，从而导致延迟。您需要限制滚动事件侦听器，因为某些浏览器会触发大量事件。特别是如果您在 OS X 上使用模拟滚动设备。由于您在侦听器中进行了大量高度计算，因此它会为每个触发的滚动事件触发回流（非常昂贵）。
要限制监听器，您必须防止监听器每次都触发。通常你会等到浏览器在 x 毫秒内没有触发事件，或者在调用回调之间有最短时间。尝试调整值以查看效果。即使是 0 毫秒也有帮助，因为它会延迟回调的执行，直到浏览器有时间（通常是 5-40 毫秒）。
切换类以在状态（静态和固定位置）之间切换，而不是在 JavaScript 中对其进行硬编码也是一种很好的做法。然后，您可以更清晰地分离关注点并避免错误地潜在的额外重绘（请参阅“浏览器是智能的”部分）。（jsfiddle 上的例子）
等待 x ms 的暂停
// return a throttled function
function waitForPause(ms, callback) {
var timer;
return function() {
var self = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
callback.apply(self, args);
}, ms);
};
}
this.start = function() {
// wrap around your callback
$window.scroll( waitForPause( 30, self.worker ) );
};
至少等待 x 毫秒（jsfiddle）
function throttle(ms, callback) {
var timer, lastCall=0;
return function() {
var now = new Date().getTime(),
diff = now - lastCall;
console.log(diff, now, lastCall);
if (diff >= ms) {
console.log("Call callback!");
lastCall = now;
callback.apply(this, arguments);
}
};
}
this.start = function() {
// wrap around your callback
$window.scroll(throttle(30, self.worker));
};
jQuery Waypoints 由于您已经在使用 jQuery，我会看看jQuery Waypoints插件，它为您的问题提供了一个简单而优雅的解决方案。当用户滚动到某个航点时，只需定义一个回调。
示例：（jsfiddle）
$(document).ready(function() {
// throttling is built in, just define ms
$.waypoints.settings.scrollThrottle = 30;
$('#content').waypoint(function(event, direction) {
$(this).toggleClass('sticky', direction === "down");
event.stopPropagation();
}, {
offset: 'bottom-in-view' // checkpoint at bottom of #content
});
});
您是否尝试过一些 jquery 滚动条插件或使用动画向下和向上滚动？它将强制所有浏览器以相同的方式工作（或关闭足够多）。
发生的事情是 firefox（至少 v12）有一个“原生”滚动动画。当您浏览任何 URL 时，您会注意到滚动操作的平滑度，而这在其他浏览器（如 Chrome 或 IE）中没有实现。
jquery 滚动插件示例：