On Twitter Bootstrap ScrollSpy, where exactly can I put data-spy = "scroll"?

Question

He speaks clearly about the documentation.

just add data-spy = "scroll" to the element you want to look at (usually it will be a body)

But it looks like I can make it work if I put it on my body. When I put it in any other element that I want to track, the last nav element is selected.

Here it is on the body, and it works, and this one is the same, but with data-spy="scroll" in the element that I want to look at, and it does not work (only the last element is activated).

Am I doing something wrong or is it a mistake?

Answer 1

Your second example can be fixed using:

 #TryToPutDataSpyHere{ display:inline; } 

But for some reason it doesn't work on a demo

I was able to reproduce your problem from the document: http://jsfiddle.net/baptme/KbphR/

But it only works if I had the following css code (used in the document):

 .scrollspy-example { height: 200px; overflow: auto; position: relative; } 

http://jsfiddle.net/baptme/KbphR/1/

It seems that height: 200px; and overflow: auto; both are necessary

In your case, it cannot be because of your .box{height: 500px;}

Answer 2

I had a similar problem when the scroll spy worked on nothing but a tag, so I really went into bootstrap js, found the Scroll spy section (SCROLLSPY CLASS DEFINITION) and changed this line:

$ element = $ (element) .is ('body')? $ (window): $ (element)

:

$ element = $ (element) .is ('body')? $ (window): $ (window) // $ (element)

(note that the element after // is a comment, so I remember that I changed it)

And that fixed it for me.