CODEWITHSUNDEEP
twitter-bootstrapscrollspy
Scott Austin
Scott Austin

Reputation: 37

Bootstrap ScrollSpy not working properly

Here's the page I'm having the problem with http://intern-dev.obrary.com/manufacturer.

I'm trying to implement ScrollSpy through JavaScript. Here's the js:

<script>$(document).ready(function(){
$(".scroll-area").scrollspy({target: "#myNavbar"}) 
});</script>

And here's the id for the navbar:

<div class="navbar navbar-default navbar-fixed-top" id="myNavbar">

And the target class:

<div class="scroll-area" data-spy="scroll" data-offset="50">

Something with the implement is working because after I added the above the FAQ link in the navbar got the the active treatment. But the active does not change to any of the other navbar elements.

Upvotes: 0

Views: 9896

Answers (3)

Kyle Montgomery
Kyle Montgomery

Reputation: 1

I discovered that if an ID begins with an underscore (and perhaps this is true for other special characters) then scrollspy does not work. I was able to get it working by removing the underscore from my links.

does not work:
<h1 id="_Toc423191681">Leasing</h1>
works:
<h1 id="Toc423191681">Leasing</h1>

Upvotes: 0

MacKentoch
MacKentoch

Reputation: 2456

UPDATE

DECLARE jQuery before bootstrap.min.js :

<!--jquery 1st, this version but your may be ok : jquery-1.11.2.min.js-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>

<!--then bootstrap-->
<script src="/js/bootstrap.min.js" type="text/javascript"></script>

DEBUG in Chrome as you asked me :

  1. open debugger :
    • windows : CONTROL+SHIFT + I
    • mac: COMMAND+ALT+ I
  2. go Resources tab
  3. expand Frame,then tree depends your website ;in your website :(manufacturer)
    • you see scripts, css loaded
  4. use console (it show error...)
    • tab console

As I said earlier, I prefer Chrome but other navigators could be good it is up to you.

Upvotes: 1

Scott Austin
Scott Austin

Reputation: 37

Further investigation has revealed the problem. The ScrollSpy class must go on the body. Here's what the body looks like now:

  <body class="scroll-area" data-spy="scroll" data-offset="0">

I had made a within where the class and data-spy where placed. I did this because the navbar was within the body and I assumed the scroll area could not also include the navbar. But that is not the case.

So it's working now at http://intern-dev.obrary.com/manufacturer

Upvotes: 0

Related Questions