Pourquoi ne fonctionne pas le scrollspy de Bootstrap?

J'ai une configuration modale Bootstrap simple, et dans le mode modal j'ai un contenu avec un nav et scrollspy mis en place. Cependant, cela ne fonctionne pas. Je vois qu'il s'active, mais le nav n'est jamais mis à jour.

La source complète est trop longue pour ici et vous ne pourrez pas voir l'effet que je reçois, alors j'ai configuré un jsfiddle

J'utilise la méthode data-spy="scroll" pour l'activer. Qu'est ce que j'ai mal fait? Pourquoi le nav n'est-il pas mis à jour avec votre position?

Hé, je pense qu'il y a deux problèmes ici:

(1) mettre le défilement sur quelque chose d'autre que le corps cause un problème. Regarde ça:

Dans Twitter ScrollSpy de Bootstrap, où est-ce que je peux exactement mettre spy = "scroll"?

Essentiellement si vous ajoutez:

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

Vous allez permettre de faire défiler vers «espionner» sur autre chose que le corps. http://jsfiddle.net/hajpoj/SZYKM/ Cette version modifiée de votre jsfiddle

(2) Mettre scrollspy dans un modèle provoque plus de problèmes. Si vous placez le modèle ci-dessus dans un modèle, il est génial. Je ne suis pas positif mais je pense que vous devez faire quelque chose comme

 .scrollspy('refresh') 

Indiqué dans les documents http://twitter.github.com/bootstrap/javascript.html#scrollspy

Bootstrap scrollspy a encore quelques bugs (j'adore vraiment les bottes). J'utilise un script personnalisé pour cela, il fonctionne mieux et est plus 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/

Assurez-vous que votre dossier bootstrap contient tous les fichiers .js requis pour ScrollSpy

Dans mon cas, mon dossier bootstrap (bootstrap / js /) comporte les fichiers suivants:

 <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> 

Vous devez appeler .scrollspy ('actualiser') après que le mode modal a été affiché comme ceci:

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