In Twitter Bootstrap's ScrollSpy, where exactl

问题:

It says clearly on the documentation

just add data-spy="scroll" to the element you want to spy on (most typically this would be the body)

But it seems I can only get it to work if I put it on the body. When I put it in any other element that I wish to spy on, the last element of the nav gets selected.

Here it's on the body, and it works, and this is the same exact thing but with data-spy="scroll" on the element I want to spy on, and it fails (only the last element gets activated).

Am I doing something wrong or is this a bug ?

回答1:

Your 2nd example can be fixed by using:

#TryToPutDataSpyHere{
  display:inline;
}

But for some reason it doesn't works on the demo

I managed to reproduce your issue from the doc: http://jsfiddle.net/baptme/KbphR/

But it only works if I had the following css code (used on the doc):

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

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

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

Not in you case maybe because of your .box{height: 500px;}

回答2:

I had a similar issue where scroll spy would not work on anything but a tag so I actually went into the bootstrap js found the Scroll spy (SCROLLSPY CLASS DEFINITION) section and changed this line:

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

to this:

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

(note that the element after the // is a comment so I don't forget I changed it)

And that fixed it for me.