javascript - 为什么 Bootstrap 的 scrollspy 不起作用？

Question

我有一个简单的 Bootstrap 模式设置，并且在模式中我有一个nav和 scrollspy 设置的内容。但是，它不起作用。我看到它被激活了，但导航永远不会更新。

完整的源码在这里太长了，你看不到我得到的效果，所以我设置了一个jsfiddle

我正在使用该data-spy="scroll"方法来启用它。我做错了什么？为什么导航没有根据您的位置更新？

Answer 1

bootstrap scrollspy 仍然有一些错误（我真的很喜欢 bootsrap）。我为此使用了一个自定义脚本，它工作得更好，更灵活：

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

来源：http: //jsfiddle.net/mekwall/up4nu/

Answer 2

嘿，我认为这里有两个问题：

(1) 将 scrollspy 放在身体以外的东西上会导致问题。看看这个：

在 Twitter Bootstrap 的 ScrollSpy 中，我究竟可以在哪里放置 data-spy="scroll"？

基本上，如果您添加：

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

它将允许您滚动监视以“监视”身体以外的东西。 http://jsfiddle.net/hajpoj/SZYKM/ 这是你的 jsfiddle 的修改版本

(2) 将 scrollspy 放入模型会导致更多问题。如果你把上面的东西放到一个模型中，它有点吓坏了。我不积极，但我认为你需要做类似的事情

.scrollspy('refresh')

在文档中说明http://twitter.github.com/bootstrap/javascript.html#scrollspy

Answer 3

请确保您的引导文件夹包含 ScrollSpy 所需的所有 .js 文件

就我而言，我的引导文件夹 (bootstrap/js/) 包含以下文件：

<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

在模态显示如下之后，您应该调用 .scrollspy('refresh') ：

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