Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Scrollspy

Scrollspy automatically updates Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.


How to Create a Scrollspy

The following example shows how to create a scrollspy:

Run code

Example explained:

The data-spy="scroll" specifies the element that should be used as the scrollable area (typically this would be the <body>).

The data-target attribute specifies the ID or the class name of the navigation bar. This is to make sure that the navigation bar is connected with the scrollable area.

The data-offset attribute specifies the number of pixels to offset from top when calculating the position of scroll.

Note that nav links must have a href attribute (<a href="#section1">) that matches the ID of the scrollable element (<div id="section1">).

Scrollspy requires position: relative; on the element you’re spying on, usually the <body>.



Scrollspy Vertical Menu

Scrollspy also works with vertical .navs.

Scroll the area next to the pills and watch the active class change.


Scrollspy Nested Vertical Menu

Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active.

Scroll the area next to the nested pills and watch the active class change.


Scrollspy List Group

Scrollspy also works with .list-groups.

Scroll the area next to the list group and watch the active class change.