Adding ScrollSpy to your Website

This article adds ease of navigation to your website using ScrollSpy, a tool that automatically updates links in your website navigation based on the scroll position of your website.

In this article, Solodev shows you how to add further ease of navigation to your website using ScrollSpy, a tool that automatically updates links in your website navigation based on the scroll position of your website.

Below is the HTML, CSS, and JavaScript required.

Step 1 - Add the HTML below to your web page.

<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="#"> <img src="https://www.solodev.com/assets/email/logo.png" alt="Logo Solodev"></a>
      </div>
      <div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
            <li><a href="#section4">Section 4</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>

  <div id="section1" class="container-fluid">
    <h1>Section 1</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! <strong>Clearly another Festivus Miracle!</strong></p>   
  </div>
  <div id="section2" class="container-fluid">
    <h1>Section 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>   
  </div>
  <div id="section3" class="container-fluid">
    <h1>Section 3</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>
  </div>
  <div id="section4" class="container-fluid">
    <h1>Section 4</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>
  </div>
</body>

Step 2 - Add CSS to the main stylesheet of your website.

body {
  position: relative;
}
#section1,
#section2,
#section3,
#section4 {
  padding-top: 120px;
  padding-left: 75px; 
  height:700px;
  color: #fff; 
  background-color: #696969;
}
#section2 {
  background-color: #D3D3D3;
}
#section3 {
  background-color: #ff9800;
}
#section4 {
  background-color: #00bcd4;
}
.navbar-brand>img {
  padding-top: 11px;
  width: 130px;
  margin-left: 60px;
}
.navbar-brand {
  height: auto;
  margin: 0;
  padding: 0;
  margin-right: 20px;
}
.navbar-default .navbar-nav > .active > a {
  padding: 8px 19px 9px !important;
}
.navbar-right {
  padding-top: 0;
}
.navbar-default .navbar-nav > li > a::after {
  background-color: transparent;
  border-bottom: 3px solid #d2282e;
}
.navbar-default .navbar-nav>li {
  display: inline-block;
  text-align: center;
  float: none;
}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:hover {
  color: #fff;
}
.navbar-default .navbar-nav>li>a:hover {
  background-color: #0392CC;
}
.panel-body {
  color: #000;
}

Step 3 - Add the includes below to your web page.

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Download from Github

Share on Facebook Tweet It