Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

scrollspy
bootstrap
plugin

What is a scrollspy?

Educative Answers Team

Scrollspy is a bootstrap​ plugin that automatically updates links in a navigation list based on the current scroll position.

In the example below, scroll down the HTML page and note how the sections in the navigation bar are updated accordingly.

Explanation

  • The data-spy="scroll" attribute, added to the element, ​is meant to be used as the scrollable area. It is added to the <body> element on line 99 in the example above.
  • The data-target attribute is added with a value of the ID or the class name of the navigation bar. This connects the navigation bar with the scrollable area (line 99 and line 1212).
  • The ID of the scrollable elements must match the ID of the links inside the navbar’s list of items. For example, <div id="section1"> corresponds to <a href="#section1">Section 1</a> in the <nav> component.
  • The optional data-offset attribute specifies the number of pixels used to offset from the top when calculating the position of the​ scroll. It is useful when the navbar changes its state too quickly during scrolling.

RELATED TAGS

scrollspy
bootstrap
plugin
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring