SCROLLSPY, ACCORDION, CAROUSEL

SCROLLSPY

Scrollspy is a data display that allows a user to jump directly to the data they wish to see, but also enables scrolling. Like tabs, scrollspy provides navigation tabs. But unlike tabs, scrollspy allows a user to scroll through content as well.

SCROLLSPY SAMPLE

Navigation

The first step to adding scrollspy to your page is to add a nav element. The nav element needs the classes navbar (to mark it as a navbar), navbar-default (to enable the color scheme), and navbar-static (to allow it to scroll with the page). In addition, you will want to add the role=’navigation’ attribute for accessibility.

In addition, you will need to give the nav element an ID. When scrolling through content, the tab that represents the data that is currently being viewed should be active; Bootstrap handles this by requiring you to point the container for the data back to the navigation.

  1. <navclass=”navbar navbar-default navbar-static” role=”navigation” id=”navbar-spy”>
  2. <!– links –>
  3. </nav>

Inside of the nav element, you’ll add an unordered list. The ul element needs to have both nav and navbar-nav classes added to it. Inside of there you will add the links that will act as the navigation links to the scrollspy content. Each link will point to the ID of the content’s container, again making sure to use CSS selector syntax. The link for the first data to be displayed should have the active class added.

  1. <ulclass=”nav navbar-nav”>
  2. <li class=”active”><a href=”#scroll-first”>First</a></li>
  3. <li><a href=”#scroll-second”>Second</a></li>
  4. </ul>

Content

The content that the user will navigate through using scrollspy needs to be inside of a container decorated with data-spy=’scroll’, and its data-target attribute set to the ID set on the nav element (again using CSS selector syntax). If you want to use scrollspy for the navigation of the entire page, say for a frequently asked questions (FAQ) page, you can use those attributes on the body element. Finally, the style of the containing element needs to have position:relative in order to ensure the tabs highlight correctly as the user scrolls.

In the example below, I use a div as the container, with the height sent to a small value, to reduce the vertical space for my demo, and then overflow-y set to scroll to enable scrolling.

Each block of content needs to be inside of a container with an ID. The ID will be referenced by the links in the nav element.