I'm trying to use Bootstrap scrollspy. But it doesn't seem to be working for my application.
I've everything set as specified in the Bootstrap Official Documentation - v2.3.2.
So, my body element looks like this:
<body data-spy="scroll" data-target=".user-menu">...</body>
My application stack uses Backbone JS and the view gets populated by different sub-views. Eventually the DOM looks something like this:
<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>
Other SO posts similar to this but not helpful:
Bootstrap 4 - Scrollspy not working
Twitter Bootstrap Scrollspy not working at all
