I've been struggling to get ScrollSpy up and running. I have a fixed menu on the left side that sticks as the user scrolls down, but for some reason, ScrollSpy just won't cooperate. I've tried numerous methods to make it work, even with the use of a CMS (DotNetNuke), so please forgive any messy code you see.
Here's the HTML for the navigation:
<div role="complementary" class="bs-docs-sidebar hidden-print" id="sideNav">
<div class="sideNavCont">
<div>
<span class="sideMenuHeading">TITLE</span>
</div>
<div class="sideMenuGuideSep"></div>
<div class="sideMenu" id="navbar">
<ul class="nav nav-list affix sideMenuGuide">
<li><a href="#opt1">Option 1</a></li>
<li><a href="#opt2">Option 2</a> </li>
<li><a href="#opt3">Option 3</a> </li>
<li><a href="#opt4">Option 4</a> </li>
(and so on...)
</ul>
</div>
</div>
</div>
And here is the HTML for the content I want ScrollSpy to target:
<div id="content">
<span id="opt1">
<strong>Overview</strong>
</span>
<div>
<strong>
<span id="opt2" style="font-size: 32px;">TITLE</span>
</strong>
</div>
<p>
<span id="opt3" style="font-size: 32px;">
<strong>TITLE</strong>
</span>
</p>
</div>
Additionally, I'm using this snippet of jQuery:
$('body').scrollspy({ target: '#content' });
Keep in mind that I already have functioning page anchors linked from the menu headings.
I know the solution is probably right under my nose, but any assistance would be greatly appreciated. Thank you!