Login/Register
What is the minimum code to make ScrollSpy bootstrap sidebar like the example?
Asked Answered
Solved twitter-bootstrapscrollspy
E

2

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

Edlin answered 20/7, 2013 at 7:46 Comment(10)
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. – Demantoid
If you're going to bounty this question, at least make sure that the link is valid... – Joniejonina
@CodyGray To be fair the page is just being updated. – Demantoid
what do you want to achieve exactly? In the example there is only the base behaviour of scrollspy. You want to achieve that? – Nnw
What do you mean by "base behaviour"? – Edlin
I just saw, it looks like scrollspy has been taken out of bootstrap 3, is this correct? – Edlin
Various things like typeahead are gone but scrollspy is still there. – Demantoid
Yes, you are right, my mistake for thinking it was removed – Edlin
@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 getbootstrap.com/javascript/#scrollspy – Izettaizhevsk
@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) – Edlin
I
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.

Izettaizhevsk answered 27/7, 2013 at 11:17 Comment(17)
I looked at the JSFiddle. How do I get it to style like the Bootstrap example on their site though? – Edlin
@Zubair , there are several scroll spy examples @ twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy , could you please be more specific? – Izettaizhevsk
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. – Demantoid
I meant the scrollspy on the left hand side of the page, through which you can browse through all examples – Edlin
@Zubair thanks for the clarification. Please see the edit above that I added yesterday. – Izettaizhevsk
Thanks, jsfiddle.net/panchroma/ExWDq worked. How did you link the left side scrollspy with the contant though, I couldn't see any linking mechanism? – Edlin
>How did you link the left side scrollspy with the content though..? Steps 4 and 5 at the start of my answer. – Izettaizhevsk
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? – Passionless
@TomNurkkala, does this work for you? jsfiddle.net/panchroma/bjRMb It looks good for me in on OSX 10.8, Chrome 29.0.1547.57 – Izettaizhevsk
@DavidTaiaroa, no -- when clicking on the items in the affixed menu, various elements disappear. :-( – Passionless
@TomNurkkala, elements disappear from the affixed menu or the main content? Is the behaviour different for you in Chrome than with other browsers? – Izettaizhevsk
@DavidTaiaroa, In the bootstrap doc, it does not add "data-spy" to the body. But if not attach to body, it seems not work. – Dillie
@jason, what is the URL of the page you are looking at? – Izettaizhevsk
@DavidTaiaroa, here is the link: getbootstrap.com/javascript/#scrollspy. For this example, data-target="#navbar-example2", data-spry="scroll" – Dillie
@jason, set data-spy="scroll" on the element you want to spy on, ie the div which activates something on scroll. On 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! – Izettaizhevsk
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 – Edlin
How to add animate into this. Like jQuery's scrollTo – Fabyola
N
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

Negotiant answered 26/6, 2014 at 23:16 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.