HTML Tutorial

Bootstrap Scrollspy

Bootstrap Tutorial » Bootstrap Scrollspy

This library provides the developer with a multitude of components that are very easy to implement and provides a fully usable page navigation experience. It is very common to include a navigation bar to navigate through the different parts of a web page. To do this, Bootstap offers us the Scrollspy plugin with which we will automatically update the links when we move within the page.

Here you have an example. When we scroll down the page, the active link in the navigation bar will change depending on the section we want to see. The page detects the new section in the page view and updates the active link. This function is called scrollspy.

Look at the following images, the active link of the upper links change when we scroll, and with it the content.

How To Create a Scrollspy - example

With controls

The following example shows how to create a scrollspy:

Example:

  <!DOCTYPE html>

    <html>

    <head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <style>

    body {

    position: relative; 

    }

    #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}

    #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}

    #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}

    #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}

    #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}

  </style>

  </head>

  <body data-spy="scroll" data-target=".navbar" data-offset="50">
  <nav class="navbar navbar-inverse navbar-fixed-top">

  <div class="container-fluid">

  <div class="navbar-header">

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

  <span class="icon-bar"></span>

  <span class="icon-bar"></span>

  <span class="icon-bar"></span> 

  </button>

  <a class="navbar-brand" href="#">Your website name</a>

  </div>

  <div>

  <div class="collapse navbar-collapse" id="myNavbar">

  <ul class="nav navbar-nav">

  <li><a href="#section1">Item 1</a></li>

  <li><a href="#section2">Item 2</a></li>

  <li><a href="#section3">Item 3</a></li>

  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>

  <ul class="dropdown-menu">

  <li><a href="#section41">Item 4-1</a></li>

  <li><a href="#section42">Item 4-2</a></li>

  </ul>

  </li>

  </ul>

  </div>

  </div>

  </div>

  </nav> 
  <div id="section1" class="container-fluid">

  <h1>Item 1</h1>

    How it works<br /><br />

    Scrollspy has a few requirements to function properly:<br /><br />
  If you’re building our JavaScript from source, it requires util.js.<br />

    It must be used on a Bootstrap nav component or list group.<br />

    Scrollspy requires position: relative; on the element you’re spying on, usually the 'body'.<br />

    When spying on elements other than the 'body', be sure to have a height set and overflow-y: scroll; applied.<br />

    Anchors (" a ") are required and must point to an element with that id.<br />

    When successfully implemented, your nav or list group will update accordingly, moving the .active class from one item to the next based on their associated targets.<br />

    </div>

    <div id="section2" class="container-fluid">

  <h1>Item 2</h1>

  <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>

  </div>

  <div id="section3" class="container-fluid">

  <h1>Item 3</h1>

  <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>

  </div>

  <div id="section41" class="container-fluid">

  <h1>Item 4 SubItem 1</h1>

  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

  </div>

  <div id="section42" class="container-fluid">

  <h1>item 4 Subitem 2</h1>

  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

  </div>
  </body>

    </html>

Example with nested nav - example

BS Scrollspy with nested nav

Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active. Scroll the area next to the navbar and watch the active class change.

Example:

  <!DOCTYPE html>

    <html lang="en">

    <head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <style>

    body {

    position: relative;

    }

    ul.nav-pills {

    top: 20px;

    position: fixed;

    }

    div.col-sm-9 div {

    height: 250px;

    font-size: 28px;

    }

    #section1 {color: #fff; background-color: #1E88E5;}

    #section2 {color: #fff; background-color: #673ab7;}

    #section3 {color: #fff; background-color: #ff9800;}

    #section41 {color: #fff; background-color: #00bcd4;}

    #section42 {color: #fff; background-color: #009688;}

  

    @media screen and (max-width: 810px) {

    #section1, #section2, #section3, #section41, #section42  {

    margin-left: 150px;

    }

    }

  </style>

  </head>

  <body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
  <div class="container">

  <div class="row">

  <nav class="col-sm-3" id="myScrollspy">

  <ul class="nav nav-pills nav-stacked">

  <li class="active"><a href="#section1">Section 1</a></li>

  <li><a href="#section2">Section 2</a></li>

  <li><a href="#section3">Section 3</a></li>

  <li class="dropdown">

  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>

  <ul class="dropdown-menu">

  <li><a href="#section41">Section 4-1</a></li>

  <li><a href="#section42">Section 4-2</a></li> 

  </ul>

  </li>

  </ul>

  </nav>

  <div class="col-sm-9">

  <div id="section1"> 

  <h1>Section 1</h1>

  <p>Try to scroll this section and look at the navigation list while scrolling!</p>

  </div>

  <div id="section2"> 

  <h1>Section 2</h1>

  <p>Try to scroll this section and look at the navigation list while scrolling!</p>

  </div> 

  <div id="section3"> 

  <h1>Section 3</h1>

  <p>Try to scroll this section and look at the navigation list while scrolling!</p>

  </div>

  <div id="section41"> 

  <h1>Section 4-1</h1>

  <p>Try to scroll this section and look at the navigation list while scrolling!</p>

  </div> 

  <div id="section42"> 

  <h1>Section 4-2</h1>

  <p>Try to scroll this section and look at the navigation list while scrolling!</p>

  </div>

  </div>

  </div>

  </div>
  </body>

    </html>

scrollspy not working, alternative. bootstrap scrollspy data offset not working, animation, active not working, doesn't work, navbar-fixed-top

scrollspy not working, alternative. bootstrap scrollspy data offset not working, animation, active not working, doesn't work, navbar-fixed-top
Bootstrap Scrollspy - bootstrap

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.