Prev Page
Next Page  
Bootstrap Scrollspy
The ScrollSpy plugin is for automatically updating nav targets based on scroll position.  In its basic implementation, as you scroll, you can add <code>.active </code> classes to the navbar based on the scroll position. The dropdown sub items will be highlighted as well.

Via Data attributes 

To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

  Via JavaScript

First you can add position:relative; in your CSS, call the scrollspy via JavaScript:
$('body').scrollspy({ target: '#navbar-example' })
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".
Name Type Default Description
offset number 10 Specifies the number of pixels to offset from top when calculating the position of scroll
Scrollspy Navbar
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Scrollspy</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
 
<div class="container-fluid">
 
  <style>
  body {
      position: relative; 
  }
  #HTML5 {padding-top:150px;height:600px;color: #fff; background-color:#606;}
  #CSS3 {padding-top:150px;height:600px;color: #fff; background-color: #F60;}
  #JAVASCRIPT {padding-top:150px;height:600px;color: #fff; background-color: #390;}
  #BOOTSTRAP {padding-top:150px;height:600px;color: #fff; background-color: #FC0;}
  </style>
 
<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="http://www.freetimelearning.com" target="_blank">FREE TIME LEARNING</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#HTML5">HTML5</a></li>
          <li><a href="#CSS3">CSS3</a></li>
          <li class="dropdown"><a class="dropdown-toggle" 
           data-toggle="dropdown" href="#">MORE TUTORIALS<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#JAVASCRIPT">JAVASCRIPT</a></li>
              <li><a href="#BOOTSTRAP">BOOTSTRAP</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>    
 
<div id="HTML5" class="container-fluid">
  <h1>HTML5</h1>
    <p>HTML5 (No space between "HTML" and "5")is a markup language 
    used for structuring and presenting content on the World Wide Web. 
    It is the fifth and current version of the HTML standard.</p>

   <p>It was published in 28 October 2014, W3C also published an HTML 
    5.1 Candidate Recommendation on 21 June 2016. The World Wide Web 
    Consortium (W3C) to improve the language with support for the latest 
    multimedia, while keeping it both easily readable by humans and 
    consistently understood by computers and devices such as web browsers. 
    HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and 
    Document Object Model (DOM) Level 2 HTML.</p>
</div>
<div id="CSS3" class="container-fluid">
  <h1>CSS3</h1>
   <p>The CSS was started to develop around 1998. And till 2009, it was 
    under development. The first working draft of CSS3 came in 19-01-2001. 
    but it was initially declared early in the June 1999. The main difference 
    between css2 and css3 is Media Queries, Namespaces, Selectors Level 3,
    Color.</p>
</div>
<div id="JAVASCRIPT" class="container-fluid">
  <h1>JAVASCRIPT</h1>
   <p>JavaScript is the programming language of the Web. Javascript Most commonly 
    used websites this is client-side script to interact with the user and make 
    dynamic pages. All modern web browsers on desktops, tablets, and smart phones 
    are using JavaScript. JavaScript is part of the triad of technologies that all 
    Web developers must learn: HTML(Hyper Text Markup Language) to specify the 
    content of web pages, CSS(Cascading Style Sheets) to specify the presentation 
    of web pages, and JavaScript to specify the behavior of web pages.</p></div>
<div id="BOOTSTRAP" class="container-fluid">
  <h1>BOOTSTRAP</h1>
    <p>Bootstrap is the most popular HTML, CSS and JavaScript framework for 
    developing responsive, mobile-first web sites. Bootstrap is faster and 
    easier web development.</p>

   <p>Bootstrap includes a responsive, mobile first fluid grid system that 
    appropriately scales up to 12 columns as the device or viewport size 
    increases. It includes predefined classes for easy layout options, as 
    well as powerful mixins for generating more semantic layouts.</p>
</div>
 
</body>
</html>
Output :
Scrollspy Horizontal
Scrollspy Vertical Navbar
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Scrollspy</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
 
<div class="container-fluid">
 
  <style type="text/css">
  body {
      position: relative;
  }
  ul.nav-pills {
      top: 20px;
      position: fixed;
  }
  div.col-sm-9 div {
      height: 630px;
 padding:200px 20px 0px;
      font-size: 14px;
  }
  #HTML5 {color: #fff; background-color: #606;}
  #CSS3 {color: #fff; background-color: #F60;}
  #JAVASCRIPT {color: #fff; background-color: #390;}
  #BOOTSTRAP {color: #fff; background-color: #FC0;} 
  @media screen and (max-width: 810px) {
    #section1, #section2, #section3, #section41, #section42  {
        margin-left: 150px;
    }
  }
  </style>
 
  <div class="row">
    <nav class="col-sm-3" id="myScrollspy">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#HTML5">HTML5</a></li>
        <li><a href="#CSS3">CSS3</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE TUTORIALS<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#JAVASCRIPT">JAVASCRIPT</a></li>
            <li><a href="#BOOTSTRAP">BOOTSTRAP</a></li>                     
          </ul>
        </li>
      </ul>
    </nav>
    <div class="col-sm-9">
      <div id="HTML5">    
        <h1>HTML5</h1>
            <p>HTML5 (No space between "HTML" and "5")is a markup language 
            used for structuring and presenting content on the World Wide Web. 
            It is the fifth and current version of the HTML standard.</p>

           <p>It was published in 28 October 2014, W3C also published an HTML 
            5.1 Candidate Recommendation on 21 June 2016. The World Wide Web 
            Consortium (W3C) to improve the language with support for the latest 
            multimedia, while keeping it both easily readable by humans and 
            consistently understood by computers and devices such as web browsers. 
            HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and 
            Document Object Model (DOM) Level 2 HTML.</p>
      </div>
      <div id="CSS3"> 
         <h1>CSS3</h1>
            <p>The CSS was started to develop around 1998. And till 2009, it was 
            under development. The first working draft of CSS3 came in 19-01-2001. 
            but it was initially declared early in the June 1999. The main difference 
            between css2 and css3 is Media Queries, Namespaces, Selectors Level 3,
            Color.</p>
      </div>        
      <div id="JAVASCRIPT">         
        <h1>JAVASCRIPT</h1>
        <p>JavaScript is the programming language of the Web. Javascript Most commonly 
            used websites this is client-side script to interact with the user and make 
            dynamic pages. All modern web browsers on desktops, tablets, and smart phones 
            are using JavaScript. JavaScript is part of the triad of technologies that all 
            Web developers must learn: HTML(Hyper Text Markup Language) to specify the 
            content of web pages, CSS(Cascading Style Sheets) to specify the presentation 
            of web pages, and JavaScript to specify the behavior of web pages.</p>
      </div>
      <div id="BOOTSTRAP">         
        <h1>BOOTSTRAP</h1>
        <p>Bootstrap is the most popular HTML, CSS and JavaScript framework for 
            developing responsive, mobile-first web sites. Bootstrap is faster and 
            easier web development.</p>

           <p>Bootstrap includes a responsive, mobile first fluid grid system that 
            appropriately scales up to 12 columns as the device or viewport size 
            increases. It includes predefined classes for easy layout options, as 
            well as powerful mixins for generating more semantic layouts.</p>
      </div>
    </div>
  </div>
  
</div>
 
</body>
</html>
Output :
Scrollspy Vertical
Methods
The bootstrap scrollspy methods are following :
Method Description Example
.scrollspy("refresh") When calling the scrollspy via the JavaScript method, you need to call the .refresh the DOM.
$('[data-spy = "scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
Events
The bootstrap scrollspy events are following :
Event Description Example
activate.bs.scrollspy This event fires whenever a new item becomes activated by the scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function (){
// Some Content..
})
  Prev Page
Next Page