#ddscrollspy

I was working on a client website and decided to include some user interface components inspired by Twitter's Bootstrap. If you check out the Bootstrap docs you'll see that the sections of the current document are affixed to the side of the screen using Bootstrap's affix.js. Then as you scroll, each section is highlighted as the id passes through the section on the right. This is achieved with scrollspy.js.

I really enjoy the UX/UI that this combination add to a web page. This combination makes gives the nav menu two functions. It provides the user with a navigation menu. But it also provides the user with context of the document immediately upon initial load, and continues to do provide that context while scrolling through the document.

My first attempts did not go as planned. Bootstrap's affix.js and scrollspy.js work very well within the bootstrap framework. However, this was a Wordpress project based on a different framework so I had to find some alternate solutions.

ddscrollspy

To replace scrollspy.js I found this little JavaScript plugin. Ddscrollspy worked where Bootstrap's scrollspy.js wouldn't. Specifically, the Bootstrap script would only highlight the last <li> in the div. After an hour of fiddling around with scrollspy I searched for an alternative and ddscrollspy worked as advertised immediately after configuration.

jQuery Stickem

Bootstrap's affix.js worked a bit better than scrollspy did. The only problem is that it flickered, a lot, when you got to the part where affix-end needed to happen. This issue is tracked pretty well over at github. In my case, I think the root cause was that I wasn't working within the Bootstrap framework. For me, the Bootstrap Docs work very well in all browsers.

A quick search lead me to jQuery Stickem. This plugin worked very well. To make it work in Wordpress, it took a bit of theme manipulation, but that was sorted pretty quickly.

Document Ready vs. Page Load

It turns out that with jQuery Stickem, I was still having a problem at the end of the scroll. The navigation box would jump to the bottom of the page too quickly.

Both jQuery Stickem and Bootstrap's affix.js rely on calculating the size of the div that is being watched. Unlike the Bootstrap docs site, my documents contained images.

After a bit of investigation I found that the images were my problem. The height of the div changed after I was running the jQuery Stickem script. The height change was caused by the images loading. The solution was (found at csstricks.com) to run the script in the head with:

$(window).bind("load", function() { // code here });

instead of:

$(document).ready(function{ // code here })

Chris Coyier says that

...this [script] will wait for images to be finished loading, so that you can measure their widths and heights accurately...