Bootstrap:-Component “Scrollspy”

The Bootstrap 4 scrollspy is a navigation mechanism that automatically highlights the nav links based on the scroll position to indicate the visitor where they are currently on the page.

How to create Scrollspy:-

  • use nav component or list group.
  • Scrollspy requires position: relative; inside style section.
  • Add data-spy=”scroll” to the element that should be used as the scrollable area(inside body tag).
  • Add data-target with value id|class (.navbar). this is important to make sure that the navbar is connected with the scrollable area.
  • inside <div id=”name” > matches link with the nav item <a href=”#name”>.
  • Add data-offset =”30″ specifies the number of pixels to offset from top when calculating the position of scroll.
Tagged : / / / / / / / / /