Scrolling section of navigation bar for responsiveness

Posted By : Vikas Pundir | 30-Nov-2017

html

Firstly we add data-spy=" scroll" to the element that is used for scrollable area, scrollspy add in body tag on top of HTML code(<body> element).
After that, we add data-target attribute with a value of id or it may be a class name of the navigation bar. And the main thing this is to make sure that the navigation bar (navbar) is connected with the scrollable area.
Bootstrap scrollspy is a navigation mechanism that is used to show automatically highlights the navbar menu links that are worked on the scroll position for indicating visitor where they are currently on the webpage. The scrollspy will make your web page more attractive.

Scrollable elements must match the ID of the links that are defined in the inside navbar's list items. In every section a id is define(<id="section1">).
Data-offset attribute specifies the number of pixels that are used for the position of a scroll from the top. This is useful when the links inside the navbar change active state early when jumping one section to another section using scrollable elements.
You can easily add scrollspy behavior to your topbar navigation via data attributes without writing a single line of JavaScript code. Let's check out the following example:

Basically, two components are used in bootstrap scrollspy — the target nav and the scrollable area to data-spy on, which is added in body tag<body> section.
*The data-spy="scroll" attribute is applied to the scrollable element that adds in the body element.

*Added an ID or class of the parent element of the Bootstrap in data-spy=" scroll" for a scrollble element.By using id or class nav links can be targeted by the scrollspy for highlighting purpose.

*After that The optional data-offset attribute specifies the number of pixels for calculating the position of a scroll from the top. Adjust the offset value for targeted links and highlighting.But default value is always 10 pixels.

Add HTML code:

<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="#">WebSiteName</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</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</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</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</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</p>
</div>
</body>

Css code:

We add the background color to every section and also apply color on text for section identification. Assign height to all section.

<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>