Bootstrap 4 tutorial

Components(12): Scrollspy: Example with nested nav

About this demo

Scrollspy demo using three-level nested Navigations.

Container div.container
- Left div.col-4.col-lg-3
  - Navigation nav.nav.nav-pills.flex-column Attribute
    - Attribute id="scrollspy-demo"
    - Item a.list-group-item Attribute
      - Attribute href="#{position-id}"
    - Or nested navigation nav.nav.nav-pills.flex-column
      - ( id is not required for inner navs)
      - Item a.list-group-item Attributes
        
        Attribute href="#{position-id}"
        
        Indent .ml-(4|5) (⇒ Spacing )
      - Can be nested any levels
- 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.