Bootstrap 3 Scrollspy Activate Event Not Firing

StackOverflow https://stackoverflow.com/questions/18258603

Question

I'm trying to create a site using Bootstrap 3 RC1 with Scrollspy. My web page is pretty simple right now, and is essentially set up like this:

<html>
    <head>
        <!-- Head stuff here -->
    </head>

    <body>
        <section id="section_1" data-spy="scroll">
            <!-- stuff in here -->
        </section>
        <section id="section_2" data-spy="scroll">
            <!-- stuff in here -->
        </section>
        <section id="section_3" data-spy="scroll">
            <!-- stuff in here -->
        </section>

        <JScripts here ... />
    </body>
</html>

I've initialized Scrollspy by calling $("section").scrollspy() and I've set up an event handler like this:

$("section").on("activate", function(e) {
    // do stuff
});

My problem is that this activate event never gets fired. Does anyone know why it's not working? I noticed that all the tutorials use a navbar for highlighting the current section, but I don't really want a navbar.

Was it helpful?

Solution

Your markup for scrollspy is a little off. Scrollspy may not be firing which is why you are probably not getting any results. In my experience it's much easier to user data attributes to initiate scrollspy. And I haven't read one report of it working if you append the scroll listener to any other element than the body itself.

You should apply them to your body tag like this.

<body data-spy="scroll" data-target="#YOUR NAV CONTAINER">

Also, you need to make sure that your navigation structure is like this:

<div id="YOUR NAV CONTAINER">
     <ul class="nav">
          <li><a href="#SECTIONID">list item</a></li>
          <li><a href="#SECTIONID">list item2</a></li>
     </ul>
</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top