I’m building a single page website with the top bar navigation linking to different sections on the page. I’ve linked it up using Scrollspy as <body data-spy="scroll" data-offset="50" id="home">. That works great. Each section is highlighted in the navigation.
The problem lies with the final section. Because it is a short section and does not fill the entire page the id="contact" is never reached, and therefore the navigation element is not highlighted.
I notice that on the bootstrap examples page when you reach the final element it is highlighted before its id is reached – yet the id is at the top of the section just like all the other sections.
I’ve had a look through the custom application.js file but don’t see anything relating to scrollspy behaviour.
Can anyone shed any light on it?
I was just looking for the answer to this myself. The bootstrap demo page was definitely doing something different than my page when it came to the last item. I too looked through application.js but didn’t see anything. Finally I decided to compare their version of scrollspy.js and mine. They are using v2.0.4 while I had v2.0.2. I replaced my version with the new and it just started working as expected.
Then I referred to the bootstrap changelog and found out that v2.0.3 was released on April 24, 2012. One of the changes listed was “Always select last item in scrollspy if you’ve reached the bottom of the document or element”.
So I guess they quietly fixed it internally since I downloaded bootstrap. You may have already figured this out too, but hopefully it will help others looking for the same answer.