26

I have seen the left hand ScrollSpy example on the bootstrap page:

http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy

But they don't have any example code of how to get the same style and effect? What is the minimum code needed to achieve this, as all the JsFiddle examples I have seen do not have the styling.

Update

I have stopped using scrollspy on my projects as the scrollbar only works at the page level, and I need the scrollbar to only appear on the container where the scrolling takes place

yazz.com
  • 57,320
  • 66
  • 234
  • 385
  • It looks like you've linked to the Bootstrap 3 pre-release documentation. Any details we provide for BS3 are subject to change, since it's pre-release. Also as far as the scrollspy styling in the documentation goes, I think a lot of it is just the nav groups styling. – ta.speot.is Jul 27 '13 at 07:12
  • If you're going to bounty this question, at least make sure that the link is valid... – Cody Gray - on strike Jul 27 '13 at 07:20
  • 2
    @CodyGray To be fair [the page is just being updated](https://github.com/twbs/bootstrap/commit/d78c85c82a1d6b3c5b8750d663ddb8ecd72b7891). – ta.speot.is Jul 27 '13 at 07:52
  • what do you want to achieve exactly? In the example there is only the base behaviour of scrollspy. You want to achieve that? – Mangiucugna Jul 27 '13 at 08:38
  • What do you mean by "base behaviour"? – yazz.com Jul 27 '13 at 10:25
  • I just saw, it looks like scrollspy has been taken out of bootstrap 3, is this correct? – yazz.com Jul 27 '13 at 18:21
  • 1
    Various things like typeahead are gone but [scrollspy is still there](http://twitter.github.io/bootstrap/javascript/#scrollspy). – ta.speot.is Jul 28 '13 at 02:33
  • Yes, you are right, my mistake for thinking it was removed – yazz.com Jul 29 '13 at 07:43
  • @Zubair, re your comment that 'scroll-spy only works at the page level'. Set data-spy="scroll" on the element you want to spy on, it doesn't have to be the body. You can see this happening on the Bootstrap 3 site now in the scroll-spy example at http://getbootstrap.com/javascript/#scrollspy – David Taiaroa Sep 26 '13 at 10:38
  • @David - The example doesn't work from getbootstrap.com/javascript/#scrollspy. Click on the different items in the menu and you will see that it doesn't scroll the div, it scrolls the main page (I tried this in Chrome) – yazz.com Sep 26 '13 at 11:33

2 Answers2

41

See if this helps: http://jsfiddle.net/panchroma/rWYQu/

  1. In the body tag add <body data-spy="scroll" data-target="#side-nav">
    ( see fiddle options left hand column)

  2. Wrap your side nav bar in a div with this same data-target ID: <div id="side-nav" >

  3. You probably want to add the class affix to your side nav so that it stays in place: <ul class="nav nav-pills affix">

  4. Add a unique ID to each of the links in your side nav: eg <li><a href="#one">One</a></li>

  5. In the main body of the page, add sections with IDs that match the links in your side bar: eg <section id="one"> Section 1 </section>

That's it!

EDIT

How do I get it to style like the Bootstrap example on their site though?

Here's a variation if you want stying similar to the bootstrap page
http://jsfiddle.net/panchroma/ExWDq/

You will see that I've changed the classes on the nav list ul to make better use of some built in Bootstap styling, I've added chevrons to the menu links, and added styling and media queries for the nav list.

Jess
  • 23,901
  • 21
  • 124
  • 145
David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • 1
    I looked at the JSFiddle. How do I get it to style like the Bootstrap example on their site though? – yazz.com Jul 27 '13 at 17:03
  • @Zubair , there are several scroll spy examples @ http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy , could you please be more specific? – David Taiaroa Jul 27 '13 at 19:35
  • OP says *I have seen the left hand ScrollSpy example on the bootstrap page* which I interpret as *the left hand ScrollSpy ... on the bootstrap page*. i.e. the scrollspy implementation the documentation uses. – ta.speot.is Jul 28 '13 at 02:32
  • I meant the scrollspy on the left hand side of the page, through which you can browse through all examples – yazz.com Jul 29 '13 at 07:44
  • @Zubair thanks for the clarification. Please see the edit above that I added yesterday. – David Taiaroa Jul 29 '13 at 10:24
  • Thanks, http://jsfiddle.net/panchroma/ExWDq/ worked. How did you link the left side scrollspy with the contant though, I couldn't see any linking mechanism? – yazz.com Jul 29 '13 at 10:38
  • >How did you link the left side scrollspy with the content though..? Steps 4 and 5 at the start of my answer. – David Taiaroa Jul 29 '13 at 10:57
  • Very instructive example, but the same structure breaks under BS3 on Chrome. Yet the BS3 documentation works fine on the same browser. Any idea why this is the case -- or how to make this example work on BS3 on Chrome? – Tom Nurkkala Aug 26 '13 at 04:32
  • @TomNurkkala, does this work for you? http://jsfiddle.net/panchroma/bjRMb/ It looks good for me in on OSX 10.8, Chrome 29.0.1547.57 – David Taiaroa Aug 28 '13 at 19:55
  • @DavidTaiaroa, no -- when clicking on the items in the affixed menu, various elements disappear. :-( – Tom Nurkkala Aug 28 '13 at 23:41
  • @TomNurkkala, elements disappear from the affixed menu or the main content? Is the behaviour different for you in Chrome than with other browsers? – David Taiaroa Aug 29 '13 at 00:57
  • @DavidTaiaroa, In the bootstrap doc, it does not add "data-spy" to the body. But if not attach to body, it seems not work. – jason Sep 24 '13 at 12:36
  • @jason, what is the URL of the page you are looking at? – David Taiaroa Sep 24 '13 at 16:12
  • @DavidTaiaroa, here is the link: http://getbootstrap.com/javascript/#scrollspy. For this example, data-target="#navbar-example2", data-spry="scroll" – jason Sep 26 '13 at 09:02
  • @jason, set data-spy="scroll" on the element you want to spy on, ie the div which activates something on scroll. On http://getbootstrap.com/javascript/#scrollspy this is div with the fat and mdo text. In my original example we were spying on the entire page. Hope this helps! – David Taiaroa Sep 26 '13 at 10:37
  • I tried it but it doesn't work. Did this actually work for you? I ended up messing around with the bootstrap classes as things are hard coded to the "body" tag, but I still could not get it to work – yazz.com Sep 26 '13 at 11:30
  • How to add animate into this. Like jQuery's scrollTo – NkS Jul 15 '14 at 12:49
9

While doing some research into using sidenav scrollspy I found a good tutorial on coding everything

All the source can be found on github

botheredbybees
  • 582
  • 6
  • 14