Zurb 5 Sticky Topbar Performance

While profiling our Zurb 5 implementation, we noticed a slight bottle neck using the "sticky" topbar component. The user would sometimes experience a "stutter" or "glitch" while scrolling. And users with lower end devices would experience the issue more often.

The problem: update_sticky_positioning is called a lot. Too much. After a couple of good scrolls, hundreds of times.

The solution: throttle the scroll handler when calling update_sticky_positioning.

I introduced a new setting named scroll_throttle with a default value of 300 milliseconds. Throughout our test cycles the value works well.

Inside the sticky function this:

this.S(window).on('scroll', function () { 
    self.update_sticky_positioning(); 
});

Becomes:

this.S(window).on('scroll', self.throttle( function () { 
    self.update_sticky_positioning(); 
}, self.settings.scroll_throttle));

View the pull request. Sure, it's a slight gain but the stutter is pretty much gone.

Javascript profiler before:

Javascript profiler after:

Disclaimer: I am a Foundation fan, user, and minor open-source contributor. And yes, I work for a company that sells bras.