Menu
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.
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
254
To create a scrollspy, use the data-bs-spy=” scroll” attribute to make the required area scrollable. For example, we choose html body as the scrollable area. Give ID or class name of the navigation bar to data-bs-target attribute to connect navbar or list-group with scrollable area.
The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.
You can do it by simply adding Bootstrap classes... Show activity on this post. I have modified the code of #sidebar-wrapper . It will add a scrollbar when overflow-y happens.
See if this helps: http://jsfiddle.net/panchroma/rWYQu/
In the body tag add <body data-spy="scroll" data-target="#side-nav">
( see fiddle options left hand column)
Wrap your side nav bar in a div with this same data-target ID: <div id="side-nav" >
You probably want to add the class affix to your side nav so that it stays in place: <ul class="nav nav-pills affix">
Add a unique ID to each of the links in your side nav: eg <li><a href="#one">One</a></li>
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.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
