Menu
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?
216
Just increase your data-offset attribute to something larger like 500, like so:
<body data-spy="scroll" data-offset="500" id="home">
The bootstrap demo works fine because it is also offsetting the height of the subnav, along with the 50px offset that is given on the data attribute.
143
I have a workaround. On line 40 of twitter's scrollspy JS, you'll see:
this.process()
Just remove that. This runs the process method in a clever attempt to start 'er up. But this is processed when you scroll anyways, so just remove it and you should be good.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
