上Chrome和IE波涛汹涌/ Laggy滚动事件上Chrome和IE波涛汹涌/ Laggy滚动事件

我想有一个内容块始终显示给用户，即使他滚动一路下跌的页面。他还应该能够和上下滚动内容分块。这里是一个精简版向您展示我的意思是小提琴：

http://jsfiddle.net/9ehfV/2/

向下滚动时，直至到达红块的底部应该注意到，这将解决这个窗口上的块，和滚动备份的时候，它把它放回。

在Firefox一个可以上下滚动和上述固定/解除固定是感觉不到的 - 光滑如丝。

一旦一个人试图在Chrome或IE滚动，但是，它似乎是一个滚动事件滞后，人们可以看到块“毛刺”一秒钟。这不是代码滞后 - 这似乎是一些与浏览器。

有没有什么办法解决这一问题？我在我束手无策。

我会很感激我如何能实现以不同的方式同样的效果建议...谢谢

Answer 1:

由于JavaScript中的同一个线程中运行的用户界面，一个滚动事件回调能阻断UI线程，从而引起滞后。你需要，因为一些浏览器解雇他们中的很多节流滚动事件侦听器。特别是，如果你在使用模拟滚动装置OS X。既然你在你的听众做了很多高度计算的，它会触发回流对于被激发每一个滚动事件（很贵）。

油门的听众，你必须防止监听器发射的每一次。通常你等到浏览器不为x毫秒触发一个事件，或者调用你的回调之间的最短时间。尝试调整值，看看效果。即使是0毫秒可以提供帮助，因为它会延迟回调的执行，直到浏览器有时间（一般为5-40毫秒）。

这也是一个触发类的状态（静态和固定的位置），而不是硬编码在JavaScript之间切换一个很好的做法。然后，你必须关注更清洁的分离和错避免潜在的额外重绘（请参阅“浏览器是智能”一节）。（上的jsfiddle例子）

等待X毫秒的暂停

// 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个MS（ 的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的航点既然你已经使用jQuery，我会看看jQuery的航点插件，它有一个简单而优雅的解决你的问题。只要定义一个回调，当用户滚动到一定的航点。

例如：（的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
    });
});