About this demo Picture 1 Picture 2 Picture 3 Slide 1 Slide 2 Slide 3

Bootstrap 4 tutorial

Components(12): Scrollspy: Example with list-group

About this demo

Container div.container
- Left div.col-4.col-lg-3 : NavBar + List group
  - NavBar nav.navbar.navbar-light.bg-light.mb-2
    - span.navbar-brand
      - Text Scrollspy Demo (3)
  - List group div.list-group Attribute
    - Attribute id="scrollspy-demo"
    - Items a.list-group-item Attribute
      - Attribute href="#{position-id}"
- Right div.col-8.col-lg-9 - Scrolling contents (here) Attributes
  - Attribute data-spy="scroll"
  - Attribute data-target="#scrollspy-demo"
  - Attribute data-offset="10" (⇒ Note )
  - Style style="height: 32rem; overflow-y: scroll;"
  - Scrolling elements Attribute
    - Set id="{position-id}" to the tracking targets

Note: This demo sets data-offset="10" (px) for adjusting scrolling position calculation. Ideally, it should be "0" . But it sometimes causes a problem that it does not activate a pill when a use click a pill to scroll the page (possibly by numerical errors). Setting an offset around "10" results to natural behaviors.

Below are dummy scrolling contents. Each heading have a specific id="{position-id}" for scroll tracking.