Reputation: 499
I read dozens of examples and tutorials but on my page I can't get Bootstrap ScrollSpy to work. Here is my code:
HTML:
<div id="nav_bar">
<div class="container">
<nav id="nav_anchors">
<ul class="nav">
<li><a href="#top">Aktion</a></li>
<li><a href="#content_produkte">Produkte</a></li>
<li><a href="#content_tarif">Tarif</a></li>
</ul>
</nav>
<!-- ... some other elements ... -->
</div>
</div>
JavaScript:
$('body').scrollspy({ target: '#nav_anchors' });
Here is my page in development:
http://www.handyservice.de/de/top-angebote/test-landingpage-4/angebot.html
Thank you in advance!
Upvotes: 1
Views: 752
Reputation: 30407
According to the docs on scrollspy:
Resolvable ID targets required
Navbar links must have resolvable id targets. For example, a<a href="#home">home</a>
must correspond to something in the DOM like<div id="home"></div>
.
Meaning the anchor href must contain and only contain the location hash of the target section.
Works: <a href="#content_tarif">Tarif</a>
Doesn't: <a href="/angebot.html#content_tarif">Tarif</a>
Here's a working example in Stack Snippets:
$('body').scrollspy({ target: '#nav_anchors' });
#nav_bar {
position: fixed;
top: 0;
width: 100%;
background: white;
border-bottom: 1px solid grey;
}
li.active {
background: #CFCFFF;
}
body {
padding-top: 40px;
}
section {
height: 600px;
width: 400px;
border-bottom: 1px solid grey;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div id="nav_bar">
<div class="container">
<nav id="nav_anchors">
<ul class="nav nav-pills">
<li><a href="#top">Aktion</a></li>
<li><a href="#content_produkte">Produkte</a></li>
<li><a href="#content_tarif">Tarif</a></li>
</ul>
</nav>
</div>
</div>
<section id="top">top</section>
<section id="content_produkte">content_produkte</section>
<section id="content_tarif">content_tarif</section>
If for some reason you can't change the href attribute of your links, you can optionally provide the data-target
attribute for each anchor tag to explicitly declare the target
You'll notice that the scrollspy selector will accept either. Here's the relevant source code:
var selector = this.selector + '[data-target="' + target + '"],' +
this.selector + '[href="' + target + '"]'
Which turns into something like this:
var selector = '#nav_anchors .nav li > a[data-target="#content_tarif"],' +
'#nav_anchors .nav li > a[href="#content_tarif"]'
So scrollspy will work fine if you update your links like this:
<a href="de/#content_tarif" data-target="#content_tarif">Tarif</a>
Here's a working example in Stack Snippets:
$('body').scrollspy({ target: '#nav_anchors' });
#nav_bar {
position: fixed;
top: 0;
width: 100%;
background: white;
border-bottom: 1px solid grey;
}
li.active {
background: #CFCFFF;
}
body {
padding-top: 40px;
}
section {
height: 600px;
width: 400px;
border-bottom: 1px solid grey;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div id="nav_bar">
<div class="container">
<nav id="nav_anchors">
<ul class="nav nav-pills">
<li><a href="de/#top" data-target="#top">Aktion</a></li>
<li><a href="de/#content_produkte" data-target="#content_produkte">content_produkte</a></li>
<li><a href="de/#content_tarif" data-target="#content_tarif">Tarif</a></li>
</ul>
</nav>
</div>
</div>
<section id="top">top</section>
<section id="content_produkte">content_produkte</section>
<section id="content_tarif">content_tarif</section>
Upvotes: 1