How to use Bootstrap scroll spy?

Asked 30/10, 2012 at 6:49 Answered 4/10, 2021 at 10:12

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>

Bates answered 30/10, 2012 at 6:49 Comment(0)

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.)

Wynd answered 28/3, 2013 at 15:14 Comment(7)

documentation example link is dead, you can find it here now. – Audrey 28/7, 2013 at 9:46

+1 for the "spied element needs to have a scroll bar", that's what made the trick for me! – Cicero 25/9, 2013 at 7:12

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. – Joellejoellen 17/10, 2013 at 3:24

@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. – Wynd 18/10, 2013 at 17:34

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 – Nebiim 8/11, 2013 at 1:30

And that if you activate scrollspy via JS, you don't need to have a scroll bar: jsfiddle.net/Ra3EM – Nebiim 8/11, 2013 at 1:37

The link to the documentation is to Bootstrap 2, which is out of date. Here is the updated link – Humming 15/10, 2015 at 22:12

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;
}

Brie answered 30/10, 2012 at 6:52 Comment(3)

Thanks for the reply. However, I still do not know what is wrong with the original code. – Bates 1/11, 2012 at 8:51

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/… – Bates 1/11, 2012 at 8:53

@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 – Kallick 3/1, 2015 at 7:18

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">

Subdivision answered 18/8, 2014 at 0:34 Comment(0)

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.

Fogarty answered 18/7, 2014 at 1:15 Comment(0)

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" >

Hibernaculum answered 25/6, 2017 at 23:43 Comment(0)

After hours of frustration and research, I came to find that many people are also not pleased with Bootstrap Affix's documentation (www.mtjhax.wordpress.com). After all the looking around though, this solution on Bootply worked for me: http://bootply.com/63937

Say your navigation had the id "navbar", the body should look like this:

<body data-spy="scroll" data-target="#navbar">
    ...
</body>

And the navbar itself should be as follows:

<div class="navbar" id="navbar">
    <ul class="nav navbar-nav">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>               
</div>

You then initialized the plugin...

$('#nav').affix({
    offset: {top: 0}
});

... and give the navigation proper styling:

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

Orva answered 12/8, 2013 at 20:16 Comment(1)

The question is about the scrollspy feature, not the affix one. – Primatology 18/6, 2014 at 18:50

$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

Coparcener answered 23/6, 2016 at 12:14 Comment(0)

.nameClasse {
  position: relative;
  overflow: auto;
  height: 330px;
}

<div data-spy="scroll" data-target="#navbarVertical" data-offset="0" class="nameClass">

Hildebrandt answered 26/5, 2018 at 22:56 Comment(1)

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. – Limerick 27/5, 2018 at 0:26

Consider using the HxScrollspy component based on Bootstrap 5.

Obreption answered 4/10, 2021 at 10:12 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags