top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

What is Scrollspy plugin in bootstrap and how to use it?

0 votes
528 views
What is Scrollspy plugin in bootstrap and how to use it?
posted Jul 7, 2017 by Divya Nayak

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

The Scrollspy (auto updating nav) plugin allows you to target sections of the page based on the scroll position. In its basic implementation, as you scroll, you can add .active classes to the navbar based on the scroll position.

Usage

You can use the scrollspy plugin via data attributes or manually with your own JavaScript as discussed below.

Creating ScrollSpy via data attributes

Add data-spy = "scroll" to the element you want to spy on (typically the body). Then add attribute data-target with the ID or class of the parent element of any Bootstrap .nav component. For this to work, you must have elements in the body of the page that have matching IDs of the links that you are spying on.

Example

<body data-spy = "scroll" data-target = ".navbar-example">
   ...
   <div class = "navbar-example">
      <ul class = "nav nav-tabs">
         ...
      </ul>
   </div>
   ...
</body>

Creating ScrollSpy via JavaScript

You may also add scrollspy manually using the JavaScript — just call the scrollspy() Bootstrap method with the id or class selector of the navbar in your JavaScript code.

Example

<script type="text/javascript">
$(document).ready(function(){
    $("body").scrollspy({
        target: "#myNavbar",
        offset: 70
    }) 
});
</script>
answer Jul 8, 2017 by Naveen Kumar
...