Bootstrap 4 tutorial

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

About this demo

Scrollspy demo using a List group.

  • 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 id="scrollspy-demo"
        • Items a.list-group-item
          • Attribute href="#{position-id}"
    • Right div.col-8.col-lg-9 - Scrolling contents (here)
      • Attribute data-spy="scroll"
      • Attribute data-target="#scrollspy-demo"
      • Attribute data-offset="10" (⇒ Note )
      • Style style="height: 32rem; overflow-y: scroll;"
      • Scrolling elements
        • Set id="{position-id}" to the tracking targets

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

Picture 1

Picture 2

Picture 3

Slide 1

Slide 2

Slide 3