Twitter Bootstrap scrollspy always selecting last element

Question

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 1

I had the exact same problem and for me, adding height: 100% to the body element was the fix.

(stricly nothing else seemed to make it work)

Answer 2

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

Answer 3

FYI: To get my desired effect (same one as on the Twitter Bootstrap docs page) I needed to set 'body' as my target element...I could not get scrollspy'ing to work by using the immediate parent of the elements I wanted to spy as the target.

(It just auto-selected the my last element always)

Answer 4

In my case, Firefox was always selecting the last element and it was NOT the

height:100%;

on the body that was causing the problem (as I didn't have anything like that).

It was a

position:absolute; 

on a container div.

Hope it helps someone out there...