我正在尝试使用Bootstrap scrollspy
。但这似乎不适用于我的应用程序。
我已按照Bootstrap Official Documentation - v2.3.2中的说明进行了所有设置。
所以,我的身体元素看起来像这样:
<body data-spy="scroll" data-target=".user-menu">...</body>
我的应用程序堆栈使用Backbone JS
,并且该视图由不同的子视图填充。最终,DOM看起来像这样:
<section class="section profile container-fluid" data-section="profile" data-username="<%=username%>">
<div class="row-fluid">
<div id="user-profile-menu" class="span2">
<div class="hgroup user-info">
...
<nav id="user-nav" class="user-menu">
<ul class="nav list-group" role="tablist">
<li class="list-group-item">
<a href="#section1" class="user-menu-nav nav-link">Section 1</a>
</li>
<li class="list-group-item">
<a href="#section2" class="user-menu-nav nav-link">Section 2</a>
</li>
<li class="list-group-item">
<a href="#section3" class="user-menu-nav nav-link">Section 3</a>
</li>
</ul>
</nav>
</div>
...
</div>
<div id="profile-content" class="span10">
<section id="user-profile">
<div id="section1" /div>
<div class="clearfix"></div>
</section>
<section id="user-stats">
<section id="section2" class="stripe quick-stats">
Lorem Ipsum
</section>
<section id="section3" class="stripe quick-stats">
Lorem Ipsum
</section>
</section>
</div>
</div>
</section>
与此类似但无济于事的其他SO帖子:
Bootstrap 4 - Scrollspy not working
Twitter Bootstrap Scrollspy not working at all