I'm currently utilizing bootstrap on my website, and I have implemented scrollspy with bootstrap. However, I am facing an issue where adding scrollspy to other pages causes my links to behave unexpectedly. Is there a way to simply incorporate the following using a jQuery function:
data-spy="scroll" and data-target=".subnav" directly to the body tag of the specific page during load.
Although applying scroll spy to a div="span12" does not yield the desired result, the jQuery function works when added to the body element.
If anyone has an easy alternative method to achieve this or any suggestions, please share them with me.
Here is the current code snippet:
<body> <!-- Apply it here for functionality -->
<div class="span12" style="background: #fff;"> <!-- Alternatively apply it here to see if it functions correctly, which could potentially eliminate the need for the function altogether -->
<div class="span11">
<header>
<h1>TITLE</h1>
<h3>The complete 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>
Additionally, the script used to address the top navigation issue:
$(document).scroll(function(){
// If data-top attribute is absent
if (!$('.subnav').attr('data-top')) {
// Do nothing if already fixed
if ($('.subnav').hasClass('subnav-fixed')) return;
// Record the 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();