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:

alt text

Javascript profiler after:

alt text

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