I’m using bootstrap, and I have a page with scrollspy with bootstrap. I cannot add scrollspy to other pages because my links fire off unexpectedly. Is it possible to use a simply jQuery function to just add:
data-spy="scroll" and data-target=".subnav" to the body of the page on that specific page load.
Adding scroll spy to the a div="span12" doesn’t seem to work, however, the function, when placed on body, does indeed work.
If someone else has an easy solution to use this or another method, please let me know.
Here’s my code currently:
<body> <!-- Add it here to make it work -->
<div class="span12" style="background: #fff;"> <!-- OR add it here and see if it works, if so then I can avoid the function all together. -->
<div class="span11">
<header>
<h1>TITLE</h1>
<h3>The full history of..<small>By Jane Doe</small></h3>
<div class="subnav">
<ul class="nav nav-pills">
<li class="active"><a href="#overview">Introduction</a></li>
...
</ul>
</div>
</header>
<section id="overview"></section>
<section id....
</div>
</div>
And the script I’m using to fix the topnav:
$(document).scroll(function(){
// If has not activated (has no attribute "data-top"
if (!$('.subnav').attr('data-top')) {
// If already fixed, then do nothing
if ($('.subnav').hasClass('subnav-fixed')) return;
// Remember top position
var offset = $('.subnav').offset()
$('.subnav').attr('data-top', offset.top);
}
if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop())
$('.subnav').addClass('subnav-fixed');
else
$('.subnav').removeClass('subnav-fixed');
});
and $('#navbar').scrollspy();
Try