Choppy/Laggy scroll event on Chrome and IE
Since JavaScript runs in the same thread as the UI, a scroll event callback can block the UI-thread and thus cause lag. You need to throttle the scroll event listener because some browsers fire a lot of them. Especially if you're on OS X with an analog scroll device. Since you do a lot of height calculations in your listener, it will trigger a reflow (very expensive) for every scroll event that is fired.
To throttle the listener, you have to prevent the listener from firing every time. Usually you wait until the browser doesn't trigger an event for x milliseconds, or have a minimum time between calling your callback. Try adjusting the value to see the effect. Even 0 milliseconds can help, since it will delay the execution of the callback until the browser has time (usually 5-40 ms).
It's also a good practice to toggle a class to switch between states (static and fixed position) instead of hard-coding it in JavaScript. Then you have a cleaner separation of concerns and avoid potential extra redraws by mistake (see "Browsers are smart" section). (example on jsfiddle)
Wait for a pause of x ms
// return a throttled functionfunction 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 ) );};Wait at least 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 WaypointsSince you're already using jQuery, I would have a look at the jQuery Waypoints plugin which has a simple and elegant solution to your problem. Just define a callback when the user scrolls to a certain waypoint.
Example: (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 });});
Have you tried some jquery plugin for scrollbar or uses animation to scroll down and up? It will force all browsers to work at the same way (or closes enought)..
What happens is that firefox (at least v12) have a "native" scroll animation. When you navigate for any URL you can notice the smoothness for scroll actions and this is not implemented in other browsers, like Chrome or IE.
Examples for jquery scroller plugins: