❮ Bootstrap V2 List Group Bootstrap Carousel Plugin ❯

Bootstrap `ScrollSpy (Scroll Tracking)`

Description

In this tutorial, you will see how to use the Bootstrap ScrollSpy plugin to automatically update the corresponding navigation targets based on the scrollbar's position.

What is Required?

You must include jQuery, Bootstrap CSS, and a JavaScript file - bootstrap-scrollspy.js, located in the 'js' folder within the Bootstrap main folder. If you are using dropdown menus, you also need to reference bootstrap-dropdown.js in your HTML file.

jQuery is located in your Bootstrap main folder under docs > assets > js, named jquery.js. Alternatively, you can directly download jQuery from http://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js.

Below is the final output created by this tutorial:

Using Bootstrap ScrollSpy in Your Website

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap ScrollSpy Example</title>
    <meta name="description" content="Twitter Bootstrap ScrollSpy example">
    <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        .scrollspy-example {
            height: 200px;
            overflow: auto;
            position: relative;
        }
    </style>
</head>
<body>
<div class="span9 columns">
    <h2>The links in the following navbar will be highlighted</h2>
    <p>Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!</p>
    <div id="navbarExample" class="navbar navbar-static">
        <div class="navbar-inner">
            <div class="container" style="width: auto;">
                <a class="brand" href="#">w3resource</a>
                <ul class="nav">
                    <li class="active"><a href="#php">PHP</a></li>
                    <li class=""><a href="#js">JS</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Databases<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class=""><a href="#mysql">MySQL</a></li>
                            <li class=""><a href="#pgsql">PostgreSQL</a></li>
                            <li class=""><a href="#mgdb">MongoDB</a></li>

</ul>
</li>
</ul>
</div>
</div>
</div>
<div data-spy="scroll" data-target="#navbarExample" data-offset="50" class="scrollspy-example">
    <h4 id="php">PHP</h4>
    <p>PHP, an acronym for Hypertext Preprocessor, is a widely-used open source general-purpose scripting language.
        It is an HTML embedded scripting language and is especially suited for web development. The basic syntax of PHP is similar to
        C, Java, and Perl, and is easy to learn. PHP is used for creating interactive and dynamic web pages quickly, but you can do
        much more with PHP.
    </p>
    <h4 id="js">JS</h4>
    <p>
        JavaScript is a cross-platform, object-oriented scripting language developed by Netscape. JavaScript was created
        by Netscape programmer Brendan Eich. It was first released under the name of LiveScript as part of Netscape Navigator 2.0 in
        September 1995. It was renamed JavaScript on December 4, 1995. As JavaScript works on the client side, It is mostly used for
        client-side web development.
    </p>
    <h4 id="mysql">MySQL</h4>
    <p>
        MySQL tutorial of w3resource is a comprehensive tutorial to learn MySQL. We have hundreds of examples covered,
        often with PHP code. This helps you to learn how to create PHP-MySQL based web applications.
    </p>
    <h4 id="pgsql">PostgreSQL</h4>
    <p>
        In 1986 the Defense Advanced Research Projects Agency (DARPA), the Army Research Office (ARO), the National
        Science Foundation (NSF), and ESL, Inc sponsored Berkeley POSTGRES Project which was led by Michael Stonebrakessr. In 1987
        the first demo version of the project is released. In June 1989, Version 1 was released to some external users. Version 2 and

3 were released in 1990 and 1991. Version 3 had support for multiple storage managers, the query executor was improved, and the rule system was rewritten. After that, POSTGRES began to be implemented in various research and development projects. For example, in late 1992, POSTGRES became the primary data manager for the Sequoia 2000 scientific computing project. The user community around the project also began to grow; by 1993, it had doubled.

The term NoSQL was coined by Carlo Strozzi in 1998. He used this term to name his Open Source, Lightweight, Database which did not have an SQL interface. In early 2009, when last.fm wanted to organize an event on open-source distributed databases, Eric Evans, a Rackspace employee, reused the term to refer to databases which are non-relational, distributed, and do not conform to atomicity, consistency, isolation, durability—four obvious features of traditional relational database systems.

After reading the largest third-party online MySQL tutorial by w3resource, you will be able to install, manage, and develop PHP-MySQL web applications on your own. We have a comprehensive SQL TUTORIAL, which will help you understand how to prepare queries to fetch data against various conditions. The value of the 'data-offset' attribute is a number that determines the number of pixels to offset from the top when calculating the position of the scrollbar.

Call .scrollspy()

You can call .scrollspy() via JavaScript to make ScrollSpy (scroll monitoring) work properly. The following code demonstrates how to do this:

$('#navbar').scrollspy();

Where #navbar is the ID of the relevant navigation.

Methods

You can use scrollspy (scroll monitoring) when creating and removing elements on the DOM. However, you must call the refresh method. The following code demonstrates how to do this:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
});

Options

If you call scrollspy (scroll monitoring) via JavaScript, you can use the 'offset' method to determine the number of pixels to offset from the top when calculating the position of the scrollbar. The type of the method is number, and the default value is 10. You need to increase or decrease this value to make scrollspy (scroll monitoring) work properly.

Events

Once a new entry is triggered by scrollspy (scroll monitoring), the 'activate' event is triggered.

Click here to download all the HTML, CSS, JS, and image files used in this tutorial.