Why isn't Bootstrap's scrollspy working?

Question

I have a simple Bootstrap modal setup, and in the modal I have content with a nav and scrollspy set up. However, it isn't working. I see it gets activated, but the nav is never updated.

The full source is too long for here and you wouldn't be able to see the effect I am getting, so I have set up a jsfiddle

I am using the data-spy="scroll" method to enable it. What have I done wrong? Why isn't the nav being update with your position?

Answer 1

bootstrap scrollspy still has some bugs (i really love bootsrap at all). i use a custom script for this it works way better and is more flexible:

<script type="text/javascript">
$(document).ready(function(){
var lastId, topMenu = $(".menu-sidebar"),
    topMenuHeight = topMenu.outerHeight() + 150,
    menuItems = topMenu.find("a"),
    scrollItems = menuItems.map(function() {
        var item = $($(this).attr("href"));
        if (item.length) {
            return item;
        }
    });

menuItems.click(function(e) {
    var href = $(this).attr("href"),
    topMenuHeight = topMenu.outerHeight() + 20,
        offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1;
    $('html, body').stop().animate({
        scrollTop: offsetTop
    }, 300);
    e.preventDefault();
});

$(window).scroll(function() {
    var fromTop = $(this).scrollTop() + topMenuHeight;

    var cur = scrollItems.map(function() {
        if ($(this).offset().top < fromTop) return this;
    });
    cur = cur[cur.length - 1];
    var id = cur && cur.length ? cur[0].id : "";

    if (lastId !== id) {
        lastId = id;
        menuItems.parent().removeClass("active").end().filter("[href=#" + id + "]").parent().addClass("active");
    }
});
});
</script>

source: http://jsfiddle.net/mekwall/up4nu/

Answer 2

Hey I think there are two issues here:

(1) putting scrollspy on something other than the body causes problem. Check out this:

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

basically if you add:

#area-to-watch {
    height: 200px;
    overflow: auto; 
}

it will you allow you to scrollspy to "spy" on something other than the body. http://jsfiddle.net/hajpoj/SZYKM/ This a modified version of your jsfiddle

(2) Putting scrollspy into a model causes more problems. If you put the above into a model, it kind of freaks out. I'm not positive but I think you need to do something like

.scrollspy('refresh')

stated in the docs http://twitter.github.com/bootstrap/javascript.html#scrollspy

Answer 3

Please make sure that your bootstrap folder contains all the .js files required for ScrollSpy

In my case my bootstrap folder (bootstrap/js/) has the following files :

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-dropdown.js"></script>
<script src="bootstrap/js/bootstrap-scrollspy.js"></script>
<script src="bootstrap/js/bootstrap-tab.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>
<script src="bootstrap/js/bootstrap-popover.js"></script>
<script src="bootstrap/js/bootstrap-button.js"></script>
<script src="bootstrap/js/bootstrap-collapse.js"></script>
<script src="bootstrap/js/bootstrap-carousel.js"></script>
<script src="bootstrap/js/bootstrap-typeahead.js"></script>
<script src="bootstrap/js/bootstrap-affix.js"></script>

<script src="bootstrap/js/holder/holder.js"></script>
<script src="bootstrap/js/google-code-prettify/prettify.js"></script>

<script src="bootstrap/js/application.js"></script>

Answer 4

You should call .scrollspy('refresh') after the modal has been shown like this:

 $('#myModal').on('shown.bs.modal', function (e) {
        $('.modal-body').scrollspy('refresh');
 });