How to use Bootstrap scroll spy?

82,547

Solution 1

In sorting this out for myself, I've found that the element being spied upon needs to have a scroll bar.

Take a look at this Fiddle: http://jsfiddle.net/adamp/qgU6h/1/

You can either spy directly on the body element ($('body').scrollspy()) or give your content an explicit height and force it to show a scrollbar.

(If you look at the Bootstrap documentation example, it does the fixed-height trick.)

Solution 2

Thanks Jerreck I was able to make mine works with the help of

height: 100%;

in the body selector of my CSS

Also as recommended by the guys at Bootstrap http://getbootstrap.com/javascript/#scrollspy

I've added position: relative; in the body too.

The beginning of the body selector in my CSS goes like this:

body {
    position: relative;
    height: 100%;
    /* … */
}

In the <body> in HTML I had to remove

data-offset="0"

so it is now like this

<body data-spy="scroll" data-target="#navigation">

Solution 3

you can do this like http://jsfiddle.net/mCxqY/

<body data-spy="scroll" data-target="#navbar">
    <div id="post1" class="box">
        <h1>Post 1</h1>
        <p> Scroll Down↓</p>
    </div>
    <div id="post2" class="box"><h1>Post 2</h1></div>
    <div id="post3" class="box"><h1>Post 3</h1></div>

    <div id="navbar">
        <ul class="nav">
            <li><a href="#post1">Post 1</a></li>
            <li><a href="#post2">Post 2</a></li>
            <li><a href="#post3">Post 3</a></li>
        </ul>
    </div>

    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
</body>

css

@import url(http://twitter.github.com/bootstrap/assets/css/bootstrap.css);
.box{
    margin: 20px; padding: 15px;
    background: #eee;
    height: 500px;
}
#navbar{
    position: fixed;
    bottom: 0; left: 20px;
    width: 100%;
    background: #fff;
}
.nav li a{
    float: left;
    width: 80px;
    padding: 15px 0;
}
.nav li a:hover{
    color: #f33 !important;
    background: none;
}
.nav li.active a{
    color: #f55;
    text-decoration: underline;
}

Solution 4

I did it like this. for data target I use the class name .navbar

      <body data-spy="scroll" data-target=".navbar" data-offset="50">
       <nav class="navbar navbar-default navbar-fixed-top" >

Solution 5

I had to do two things to get scrollspy to work for me.

First, I had to give a height to the <body> element:

<style>

  .body
  {
    height: 100%;
  }

</style>    

<body data-spy="scroll" data-target="#scrollElement" data-offset="0">

I think this is because scroll-spy is trying to get the height of the element that you're spying on, but if there isn't a height specified for your element, it gets passed a null (or 0?) value, which seems to be breaking the script's calculations.

Second, I had to make sure that there was enough vertical space between my id elements (that the nav anchors are pointing towards).

I couldn't figure out the exact amount of space necessary (it did vary depending on the data-offset attribute, so it probably has something to do with that), but I reckon that if you have a height set to your spy element and scrollspy still isn't working - just add more content between your id elements.

View more solutions

82,547

user1780429

Updated on October 05, 2021

Comments

user1780429 almost 3 years

I cannot quite get the scroll spy to work properly with a vertical nav. Below you can find the code I use. For some reason, only "Two" gets active.

Anyone has an idea as of what is wrong?

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Twitter Bootstrap Scroll Spy Playground</title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="span3">
            <ul class="navbar nav nav-list affix">
              <li class="active"><a href="#one">One</a></li>
              <li><a href="#two">Two</a></li>
            </ul>
        </div>
        <div class="span1" data-spy="scroll">
            <section id="one">
            <h1>One</h1>
            <h2>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. </h2>
            </section>
            <section id="two">
            <h1>Two</h1>
           <h2>Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</h2>
            </section>   
        </div>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

user1780429 over 11 years

Thanks for the reply. However, I still do not know what is wrong with the original code.
user1780429 over 11 years

Actually, I tried to extract your example into a standalone file, and it does not work for me. See here: dl.dropbox.com/u/18323746/Tmp/html-playground/…
Kamran Ahmed almost 11 years

documentation example link is dead, you can find it here now.
David almost 11 years

+1 for the "spied element needs to have a scroll bar", that's what made the trick for me!
Shaun Rowan over 10 years

Hmm, I tried in ie/ff/chrome and the fiddle doesn't seem to work for me. Am I crazy? "Page1", "Page2" etc titles do not light up or highlight in any way as i scroll up / down.
adam-p over 10 years

@ShaunRowan: The URL to the externally linked bootstrap-scrollspy.js had broken, so the whole thing didn't work. I fixed the Fiddle and I believe it should work fine again.
Kevin Jurkowski over 10 years

It's worth noting that scrollspy only works with navs and navbars. Changing the class nav to nav2 will break the above fiddle: jsfiddle.net/r78U9
Kevin Jurkowski over 10 years

And that if you activate scrollspy via JS, you don't need to have a scroll bar: jsfiddle.net/Ra3EM
chikamichi about 10 years

The question is about the scrollspy feature, not the affix one.
Harry Yu over 9 years

@ShaunRowan me too, maybe the bootstrap.js of demo is too old, I change the bootstrap.js and it works fine jsfiddle.net/yujiangshui/mCxqY/313
xavdid over 8 years

The link to the documentation is to Bootstrap 2, which is out of date. Here is the updated link
Tim Diekmann about 6 years

Welcome to Stack Overflow! Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others.