Twitter Bootstrap scrollspy always selecting last element

javascript jquery-plugins twitter-bootstrap
koichirose picture koichirose · Aug 23, 2012 · Viewed 24.7k times · Source

I have an issue with scrollspy, recreated in this fiddle: http://jsfiddle.net/jNXvG/3/

As seen in the demo, the ScrollSpy plugin always keeps the last menu item selected no matter the scrolling position. I've read other questions and answers and tried different combinations of offset, etc., but none of them have helped. I can't figure out what's wrong.

I don't want to edit my template to include ugly html 'data' tags, so I am calling scrollspy() via JavaScript to activate the plugin.

The next step would be to remove the fixed content height and use 'affix' on the sidebar.

Answer

merv picture merv · Aug 25, 2012

You need to attach the ScrollSpy to the element that is going to trigger scroll events, rather than the menu that is going to reflect the scroll position:

$('#content').scrollspy();​

JSFiddle

Related questions

Twitter Bootstrap Carousel - access current index

How do I get the current index from the carousel? In this case I am using an unordered list. I know I could search through the list items to find the one with the 'active' CSS class, but I want …

Read More
Change Bootstrap modal option once it already exists

I'm using Bootstrap Modal. I declare it, I call it, I show it...everything seems to be ok. But what if I have an already existing modal previously shown with "keyboard" property to false and I want to change it …

Read More
What's the easiest way to call a function every 5 seconds in jQuery?

JQuery, how to call a function every 5 seconds. I'm looking for a way to automate the changing of images in a slideshow. I'd rather not install any other 3rd party plugins if possible.

Read More