Scroll_Header

Change class name on click in jQuery

by vaheed akhtar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
  <nav id="mainNav">
    <div class="container">
      <ul class="nav nav-tabs navbar-inverse navbar-fixed-top">
        <li class="active"><a href="#section1">Home1</a></li>
        <li><a href="#section2">Home2</a></li>
        <li><a href="#section3">Home3</a></li>
        <li><a href="#section4">Home4</a></li>
      </ul>
    </div>
  </nav>

  <div class="container">
    <div id="section1">
      <h3>Image1</h3>
      <img src="http://kb4images.com/images/images/36390293-images.jpg" />
    </div>
    <div id="section2">
      <h3>Image 2</h3>
      <img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" />
    </div>
    <div id="section3">
      <h3>Image 3</h3>
      <img src="https://www.gettyimages.in/gi-resources/images/Homepage/Hero/US/SEP2016/prestige-476863311.jpg" />
    </div>
    <div id="section4">
      <h3>Image 4</h3>
      <img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" />
    </div>


  </div>


</body>

CSS

#section1,
  #section2,
  #section3,
  #section4 {
    padding-top: 50px;
  }

JavaScript

$(document).ready(function() {
  $('body').scrollspy({
    target: "#mainNav",
    offset: ""
  });
})