Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Bootstrap ScrollSpy

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 799
    Comment on it

    The Scrollspy is a plugin which is used to highlight the links in a navigation according to the scroll position automatically. It indicates the location of the visitor/user in the page. The Bootstrap scrollspy plugin needs the use of proper bootstrap nav tabs (e.g. navbar, nav tabs or pills) to make the links applicable. 

    Here is the example to create bootstrap scrollspy :- 

    HTML :- 

    <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="#">Bootstrap Scrollspy</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 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>
          </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! 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="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>
      <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>
      <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="section41" class="container-fluid">
      <h1>Section 4 Submenu 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>Section 4 Submenu 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>

     

    CSS :- 

     body {
          position: relative; 
      }
      #section1 {padding-top:50px;height:500px;color: #fff; background-color: rgb(255,206,108);}
      #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;}
    

    jQuery :- 

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

    https://jsfiddle.net/Lf01aydj/2/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: