Scrollspy

BsScrollspy lists the content's elements marked data-scrollspy in a sticky column beside it and marks the section being read (aria-current="location"). It scrolls with the window or with its nearest scrolling ancestor (a scrollable modal body), or with scrollContainer; offset moves the trigger line below a fixed navbar. The list is built once the page is hydrated.

Getting started

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

Installation

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

Configuration

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

Usage

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

Sections

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

Scroll containers

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

Accessibility

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.

Source

<BsScrollspy>  <h2 data-scrollspy>Section A</h2>  <p>Content for section A…</p>  <h2 data-scrollspy>Section B</h2>  <p>Content for section B…</p>  <h3 data-scrollspy>Subsection B1</h3>  <p>Content for subsection B1…</p></BsScrollspy>