Bootstrap 4 Scrollspy

Bootstrap 4 offers a scrollspy component that is used to make the website more attractive and eye-catching. Basically, the scrollspy is used on the single-page website.

The scrollspy highlights the nav menu item in the navigation bar based on the scroll position of the user. It also indicates which link is currently active.

Basic Scrollspy – The default position of the scrollspy is horizontal. It automatically updates the link when you scroll the page.

Steps for creating Scrollspy

  • To create a scrollspy, add the data-spy=”scroll” attribute to the <body> element that is used as a scrollable region. Also, add the data-target attribute to the <body> element. The value of the data-target attribute should be id or class name of the navigation bar such as .navbar to ensure that the scrollable region is connected to the navigation bar.
  • Add the id to the <div> element to create the scrollable section. The value of the id of the scrollable element and the value of the href of the nav menu item must be the same.

Note: The scrollspy needs the CSS position property ‘ position: relative; ’ to make the scrollspy work properly.

Example

Output

Bootstrap 4 Scrollspy

Scrollspy Vertical Menu – Bootstrap 4 allows you to create the scroll spy menu vertical instead of horizontal.

Example

Output

Bootstrap 4 Scrollspy

Pin It on Pinterest

Share This