Bootstrap 4 tutorial

Components (12): Scrollspy: Example in navbar

About this demo

Scrolling content body Attributes
- Attribute data-spy="scroll"
- Attribute data-target="#scrollspy-demo"
- Attribute data-offset="56" (⇒ Note 1 )
- Navigation bar (fixed top) nav.navbar.fixed-top.navbar-light Attributes
  - Attribute id="scrollspy-demo"
  - Style (set to translucent) style="background: rgba(222,222,222,0.6);" (⇒ Note 2 )
  - Title text Scrollspy demo (1) (see Navbar - brand )
  - Item list ul.nav.nav-pills (see Navbar - nav )
    - Items li.nav-item
      - Link a.nav-link Attribute
        
        Attribute (e.g.) href=`#about`
        
        Text (e.g.) About
    - Dropdown ( Slide▾ ) li.nav-item.dropdown (see Dropdowns)
- Contents div.container Attribute
  - Set id="{position-id}" to the tracking targete elements

Note 1: data-offset="56" is the height of the navigation bar (px). As this page uses a fixed-top bar, scroll caluculation should be adjusted to set the origin of scroll tracking to just beneath the bar.

Note 2: Regardless of the navigation bar, scrolling inside page with hash (by clicking pills, etc.) always scroll target elements to the top of the page. As the result, targets are always hidden by the bar. It is difficult to resolve this problem (official demos also behave the same, or you may have to use iframe ). This demo uses a translucent navigation bar as compromise.

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

Bootstrap 4 tutorial

About this demo

Picture 1

Picture 2

Picture 3

Slide 1

Slide 2

Slide 3