Question

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

完整的来源太长了，你无法看到我得到的效果，所以我设置了jsfiddle

我正在使用data-spy="scroll"方法启用它。我做错了什么？为什么导航器不会随您的位置更新？

Answer 1

bootstrap scrollspy仍然有一些bug（我真的很喜欢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放在身体以外的东西上会导致问题。看看这个：

In Twitter Bootstrap's ScrollSpy, where exactly can I put 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

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

在我的情况下，我的bootstrap文件夹（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');
 });

为什么Bootstrap的卷轴不起作用？

4 个答案: