mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-11 08:54:23 +01:00
753 lines
72 KiB
HTML
753 lines
72 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.">
|
||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||
<meta name="generator" content="Hugo 0.82.0">
|
||
|
||
<meta name="docsearch:language" content="en">
|
||
<meta name="docsearch:version" content="5.0">
|
||
|
||
<title>Scrollspy · Bootstrap v5.0</title>
|
||
|
||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/scrollspy/">
|
||
|
||
|
||
|
||
<!-- Bootstrap core CSS -->
|
||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||
|
||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||
|
||
<!-- Favicons -->
|
||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||
<meta name="theme-color" content="#7952b3">
|
||
|
||
<!-- Twitter -->
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:site" content="@getbootstrap">
|
||
<meta name="twitter:creator" content="@getbootstrap">
|
||
<meta name="twitter:title" content="Scrollspy">
|
||
<meta name="twitter:description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.">
|
||
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||
|
||
<!-- Facebook -->
|
||
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/components/scrollspy/">
|
||
<meta property="og:title" content="Scrollspy">
|
||
<meta property="og:description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.">
|
||
<meta property="og:type" content="article">
|
||
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
||
<meta property="og:image:type" content="image/png">
|
||
<meta property="og:image:width" content="1000">
|
||
<meta property="og:image:height" content="500">
|
||
|
||
<script>
|
||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||
ga('set', 'anonymizeIp', true);
|
||
ga('send', 'pageview');
|
||
</script>
|
||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||
|
||
|
||
</head>
|
||
<body>
|
||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||
<div class="container-xl">
|
||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||
<a class="d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
||
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
||
<a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
||
</a>
|
||
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
||
</svg>
|
||
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="bdNavbar">
|
||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
||
<li class="nav-item col-6 col-md-auto">
|
||
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||
</li>
|
||
<li class="nav-item col-6 col-md-auto">
|
||
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||
</li>
|
||
<li class="nav-item col-6 col-md-auto">
|
||
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||
</li>
|
||
<li class="nav-item col-6 col-md-auto">
|
||
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||
</li>
|
||
<li class="nav-item col-6 col-md-auto">
|
||
<a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||
</li>
|
||
<li class="nav-item col-6 col-md-auto">
|
||
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<hr class="d-md-none text-white-50">
|
||
|
||
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
||
<li class="nav-item col-6 col-md-auto">
|
||
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
|
||
<small class="d-md-none ms-2">GitHub</small>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item col-6 col-md-auto">
|
||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||
<small class="d-md-none ms-2">Twitter</small>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item col-6 col-md-auto">
|
||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
|
||
<small class="d-md-none ms-2">Slack</small>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item col-6 col-md-auto">
|
||
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
||
<small class="d-md-none ms-2">Open Collective</small>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
|
||
|
||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||
<div class="container-xxl d-flex align-items-md-center">
|
||
<form class="bd-search position-relative me-auto">
|
||
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
||
</form>
|
||
|
||
<div class="dropdown ms-3">
|
||
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
||
</button>
|
||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
|
||
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
||
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" fill="currentColor" viewBox="0 0 16 16">
|
||
<title>Expand</title>
|
||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
||
</svg>
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" fill="currentColor" viewBox="0 0 16 16">
|
||
<title>Collapse</title>
|
||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
||
</svg>
|
||
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
<div class="container-xxl my-md-4 bd-layout">
|
||
<aside class="bd-sidebar">
|
||
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
||
<li class="mb-1">
|
||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
||
Getting started
|
||
</button>
|
||
|
||
<div class="collapse" id="getting-started-collapse">
|
||
<ul class="list-unstyled fw-normal pb-1 small">
|
||
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
||
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
||
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
||
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
||
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
||
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
||
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
||
<li><a href="/docs/5.0/getting-started/parcel/" class="d-inline-flex align-items-center rounded">Parcel</a></li>
|
||
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
||
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
||
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="mb-1">
|
||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
||
Customize
|
||
</button>
|
||
|
||
<div class="collapse" id="customize-collapse">
|
||
<ul class="list-unstyled fw-normal pb-1 small">
|
||
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
||
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
||
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
||
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
||
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
||
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="mb-1">
|
||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
||
Layout
|
||
</button>
|
||
|
||
<div class="collapse" id="layout-collapse">
|
||
<ul class="list-unstyled fw-normal pb-1 small">
|
||
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
||
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
||
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
||
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
||
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
||
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
||
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="mb-1">
|
||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
||
Content
|
||
</button>
|
||
|
||
<div class="collapse" id="content-collapse">
|
||
<ul class="list-unstyled fw-normal pb-1 small">
|
||
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
||
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
||
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
||
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
||
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="mb-1">
|
||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
||
Forms
|
||
</button>
|
||
|
||
<div class="collapse" id="forms-collapse">
|
||
<ul class="list-unstyled fw-normal pb-1 small">
|
||
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
||
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
||
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
||
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
||
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
||
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
||
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
||
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="mb-1">
|
||
<button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="true" aria-current="true">
|
||
Components
|
||
</button>
|
||
|
||
<div class="collapse show" id="components-collapse">
|
||
<ul class="list-unstyled fw-normal pb-1 small">
|
||
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
||
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
||
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
||
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
||
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
||
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
||
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
||
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
||
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
||
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
||
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
||
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
||
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
||
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
||
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
||
<li><a href="/docs/5.0/components/offcanvas/" class="d-inline-flex align-items-center rounded">Offcanvas</a></li>
|
||
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
||
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
||
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
||
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded active" aria-current="page">Scrollspy</a></li>
|
||
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
||
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
||
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="mb-1">
|
||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
||
Helpers
|
||
</button>
|
||
|
||
<div class="collapse" id="helpers-collapse">
|
||
<ul class="list-unstyled fw-normal pb-1 small">
|
||
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
||
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
||
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
||
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
||
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
||
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="mb-1">
|
||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
||
Utilities
|
||
</button>
|
||
|
||
<div class="collapse" id="utilities-collapse">
|
||
<ul class="list-unstyled fw-normal pb-1 small">
|
||
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
||
<li><a href="/docs/5.0/utilities/background/" class="d-inline-flex align-items-center rounded">Background</a></li>
|
||
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
||
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
||
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
||
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
||
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
||
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
||
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
||
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
||
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
||
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
||
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
||
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
||
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
||
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="mb-1">
|
||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
||
Extend
|
||
</button>
|
||
|
||
<div class="collapse" id="extend-collapse">
|
||
<ul class="list-unstyled fw-normal pb-1 small">
|
||
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
||
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="mb-1">
|
||
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
||
About
|
||
</button>
|
||
|
||
<div class="collapse" id="about-collapse">
|
||
<ul class="list-unstyled fw-normal pb-1 small">
|
||
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
||
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
||
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
||
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
||
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="my-3 mx-4 border-top"></li>
|
||
<li>
|
||
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
||
Migration
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
</aside>
|
||
|
||
<main class="bd-main order-1">
|
||
<div class="bd-intro ps-lg-4">
|
||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/scrollspy.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||
<h1 class="bd-title" id="content">Scrollspy</h1>
|
||
</div>
|
||
<p class="bd-lead">Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.</p>
|
||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||
<nav id="TableOfContents">
|
||
<ul>
|
||
<li><a href="#how-it-works">How it works</a></li>
|
||
<li><a href="#example-in-navbar">Example in navbar</a></li>
|
||
<li><a href="#example-with-nested-nav">Example with nested nav</a></li>
|
||
<li><a href="#example-with-list-group">Example with list-group</a></li>
|
||
<li><a href="#usage">Usage</a>
|
||
<ul>
|
||
<li><a href="#via-data-attributes">Via data attributes</a></li>
|
||
<li><a href="#via-javascript">Via JavaScript</a></li>
|
||
<li><a href="#methods">Methods</a>
|
||
<ul>
|
||
<li><a href="#refresh">refresh</a></li>
|
||
<li><a href="#dispose">dispose</a></li>
|
||
<li><a href="#getinstance">getInstance</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#options">Options</a></li>
|
||
<li><a href="#events">Events</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
|
||
<div class="bd-content ps-lg-4">
|
||
|
||
|
||
<h2 id="how-it-works">How it works</h2>
|
||
<p>Scrollspy has a few requirements to function properly:</p>
|
||
<ul>
|
||
<li>It must be used on a Bootstrap <a href="/docs/5.0/components/navs-tabs/">nav component</a> or <a href="/docs/5.0/components/list-group/">list group</a>.</li>
|
||
<li>Scrollspy requires <code>position: relative;</code> on the element you’re spying on, usually the <code><body></code>.</li>
|
||
<li>Anchors (<code><a></code>) are required and must point to an element with that <code>id</code>.</li>
|
||
</ul>
|
||
<p>When successfully implemented, your nav or list group will update accordingly, moving the <code>.active</code> class from one item to the next based on their associated targets.</p>
|
||
<div class="bd-callout bd-callout-info">
|
||
<h3 id="scrollable-containers-and-keyboard-access">Scrollable containers and keyboard access</h3>
|
||
<p>If you’re making a scrollable container (other than the <code><body></code>), be sure to have a <code>height</code> set and <code>overflow-y: scroll;</code> applied to it—alongside a <code>tabindex="0"</code> to ensure keyboard access.
|
||
</div>
|
||
|
||
<h2 id="example-in-navbar">Example in navbar</h2>
|
||
<p>Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.</p>
|
||
<div class="bd-example">
|
||
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<ul class="nav nav-pills">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#fat">@fat</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#mdo">@mdo</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a class="dropdown-item" href="#one">one</a></li>
|
||
<li><a class="dropdown-item" href="#two">two</a></li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li><a class="dropdown-item" href="#three">three</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
|
||
<h4 id="fat">@fat</h4>
|
||
<p>Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
|
||
<h4 id="mdo">@mdo</h4>
|
||
<p>Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.</p>
|
||
<h4 id="one">one</h4>
|
||
<p>Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
|
||
<h4 id="two">two</h4>
|
||
<p>Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.</p>
|
||
<h4 id="three">three</h4>
|
||
<p>Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.</p>
|
||
<p>And some more placeholder content, for good measure.</p>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">id</span><span class="o">=</span><span class="s">"navbar-example2"</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar navbar-light bg-light px-3"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar-brand"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Navbar<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-pills"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#fat"</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#mdo"</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-item dropdown"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span> <span class="na">role</span><span class="o">=</span><span class="s">"button"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>Dropdown<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu dropdown-menu-end"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#one"</span><span class="p">></span>one<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#two"</span><span class="p">></span>two<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">hr</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-divider"</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#three"</span><span class="p">></span>three<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">nav</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">div</span> <span class="na">data-bs-spy</span><span class="o">=</span><span class="s">"scroll"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#navbar-example2"</span> <span class="na">data-bs-offset</span><span class="o">=</span><span class="s">"0"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"fat"</span><span class="p">></span>@fat<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"mdo"</span><span class="p">></span>@mdo<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"one"</span><span class="p">></span>one<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"two"</span><span class="p">></span>two<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"three"</span><span class="p">></span>three<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</code></pre></div><h2 id="example-with-nested-nav">Example with nested nav</h2>
|
||
<p>Scrollspy also works with nested <code>.nav</code>s. If a nested <code>.nav</code> is <code>.active</code>, its parents will also be <code>.active</code>. Scroll the area next to the navbar and watch the active class change.</p>
|
||
<div class="bd-example">
|
||
<div class="row">
|
||
<div class="col-4">
|
||
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<nav class="nav nav-pills flex-column">
|
||
<a class="nav-link" href="#item-1">Item 1</a>
|
||
<nav class="nav nav-pills flex-column">
|
||
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
|
||
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
|
||
</nav>
|
||
<a class="nav-link" href="#item-2">Item 2</a>
|
||
<a class="nav-link" href="#item-3">Item 3</a>
|
||
<nav class="nav nav-pills flex-column">
|
||
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
|
||
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
|
||
</nav>
|
||
</nav>
|
||
</nav>
|
||
</div>
|
||
<div class="col-8">
|
||
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0">
|
||
<h4 id="item-1">Item 1</h4>
|
||
<p>Placeholder content for the scrollspy example. This one relates to item 1. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
|
||
<h5 id="item-1-1">Item 1-1</h5>
|
||
<p>Placeholder content for the scrollspy example. This one relates to the item 1-1. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
|
||
<h5 id="item-1-2">Item 1-2</h5>
|
||
<p>Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
|
||
<h4 id="item-2">Item 2</h4>
|
||
<p>Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.</p>
|
||
<h4 id="item-3">Item 3</h4>
|
||
<p>Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.</p>
|
||
<h5 id="item-3-1">Item 3-1</h5>
|
||
<p>Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.</p>
|
||
<h5 id="item-3-2">Item 3-2</h5>
|
||
<p>Placeholder content for the scrollspy example. This one relates to item 3-2. You're original, cannot be replaced. All night they're playing, your song. California girls we're undeniable. Like a bird without a cage. There is no fear now, let go and just be free, I will love you unconditionally. I can see the writing on the wall. You could travel the world but nothing comes close to the golden coast.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">nav</span> <span class="na">id</span><span class="o">=</span><span class="s">"navbar-example3"</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar navbar-light bg-light"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"navbar-brand"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Navbar<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-pills flex-column"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-1"</span><span class="p">></span>Item 1<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-pills flex-column"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link ms-3 my-1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-1-1"</span><span class="p">></span>Item 1-1<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link ms-3 my-1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-1-2"</span><span class="p">></span>Item 1-2<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">nav</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-2"</span><span class="p">></span>Item 2<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-3"</span><span class="p">></span>Item 3<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-pills flex-column"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link ms-3 my-1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-3-1"</span><span class="p">></span>Item 3-1<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav-link ms-3 my-1"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#item-3-2"</span><span class="p">></span>Item 3-2<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">nav</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">nav</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">nav</span><span class="p">></span>
|
||
|
||
<span class="p"><</span><span class="nt">div</span> <span class="na">data-bs-spy</span><span class="o">=</span><span class="s">"scroll"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#navbar-example3"</span> <span class="na">data-bs-offset</span><span class="o">=</span><span class="s">"0"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-1"</span><span class="p">></span>Item 1<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h5</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-1-1"</span><span class="p">></span>Item 1-1<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h5</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-1-2"</span><span class="p">></span>Item 1-2<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-2"</span><span class="p">></span>Item 2<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-3"</span><span class="p">></span>Item 3<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h5</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-3-1"</span><span class="p">></span>Item 3-1<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h5</span> <span class="na">id</span><span class="o">=</span><span class="s">"item-3-2"</span><span class="p">></span>Item 3-2<span class="p"></</span><span class="nt">h5</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</code></pre></div><h2 id="example-with-list-group">Example with list-group</h2>
|
||
<p>Scrollspy also works with <code>.list-group</code>s. Scroll the area next to the list group and watch the active class change.</p>
|
||
<div class="bd-example">
|
||
<div class="row">
|
||
<div class="col-4">
|
||
<div id="list-example" class="list-group">
|
||
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
|
||
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
|
||
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
|
||
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-8">
|
||
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
|
||
<h4 id="list-item-1">Item 1</h4>
|
||
<p>Placeholder content for the scrollspy list-group example. This one relates to item 1. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. Thought that I was the exception.</p>
|
||
<h4 id="list-item-2">Item 2</h4>
|
||
<p>Placeholder content for the scrollspy list-group example. This one relates to item 2. Yeah, she dances to her own beat. Oh, no. You could've been the greatest. 'Cause, baby, you're a firework. Maybe a reason why all the doors are closed. Open up your heart and just let it begin. So très chic, yeah, she's a classic.</p>
|
||
<h4 id="list-item-3">Item 3</h4>
|
||
<p>Placeholder content for the scrollspy list-group example. This one relates to item 3. We go higher and higher. Never one without the other, we made a pact. I'm walking on air. Someone said you had your tattoo removed. Now I’m floating like a butterfly. Tone, tan fit and ready, turn it up cause its gettin' heavy. Cause once you’re mine, once you’re mine. You just gotta ignite the light and let it shine! So we hit the boulevard. Do you ever feel, feel so paper thin. I see it all, I see it now.</p>
|
||
<h4 id="list-item-4">Item 4</h4>
|
||
<p>Placeholder content for the scrollspy list-group example. This one relates to item 4. Summer after high school when we first met. There is no fear now, let go and just be free, I will love you unconditionally. Sun-kissed skin so hot we'll melt your popsicle. This love will make you levitate.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-example"</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-item-1"</span><span class="p">></span>Item 1<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-item-2"</span><span class="p">></span>Item 2<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-item-3"</span><span class="p">></span>Item 3<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#list-item-4"</span><span class="p">></span>Item 4<span class="p"></</span><span class="nt">a</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">div</span> <span class="na">data-bs-spy</span><span class="o">=</span><span class="s">"scroll"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#list-example"</span> <span class="na">data-bs-offset</span><span class="o">=</span><span class="s">"0"</span> <span class="na">class</span><span class="o">=</span><span class="s">"scrollspy-example"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-item-1"</span><span class="p">></span>Item 1<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-item-2"</span><span class="p">></span>Item 2<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-item-3"</span><span class="p">></span>Item 3<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">h4</span> <span class="na">id</span><span class="o">=</span><span class="s">"list-item-4"</span><span class="p">></span>Item 4<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">p</span><span class="p">></span>...<span class="p"></</span><span class="nt">p</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
</code></pre></div><h2 id="usage">Usage</h2>
|
||
<h3 id="via-data-attributes">Via data attributes</h3>
|
||
<p>To easily add scrollspy behavior to your topbar navigation, add <code>data-bs-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code><body></code>). Then add the <code>data-bs-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p>
|
||
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span>
|
||
<span class="k">position</span><span class="p">:</span> <span class="kc">relative</span><span class="p">;</span>
|
||
<span class="p">}</span>
|
||
</code></pre></div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">body</span> <span class="na">data-bs-spy</span><span class="o">=</span><span class="s">"scroll"</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">"#navbar-example"</span><span class="p">></span>
|
||
...
|
||
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"navbar-example"</span><span class="p">></span>
|
||
<span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"nav nav-tabs"</span> <span class="na">role</span><span class="o">=</span><span class="s">"tablist"</span><span class="p">></span>
|
||
...
|
||
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||
...
|
||
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
|
||
</code></pre></div><h3 id="via-javascript">Via JavaScript</h3>
|
||
<p>After adding <code>position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p>
|
||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">scrollSpy</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">ScrollSpy</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span> <span class="p">{</span>
|
||
<span class="nx">target</span><span class="o">:</span> <span class="s1">'#navbar-example'</span>
|
||
<span class="p">})</span>
|
||
</code></pre></div><div class="bd-callout bd-callout-danger">
|
||
<h4 id="resolvable-id-targets-required">Resolvable ID targets required</h4>
|
||
<p>Navbar links must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the DOM like <code><div id="home"></div></code>.
|
||
</div>
|
||
|
||
<div class="bd-callout bd-callout-info">
|
||
<h4 id="non-visible-target-elements-ignored">Non-visible target elements ignored</h4>
|
||
<p>Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted.
|
||
</div>
|
||
|
||
<h3 id="methods">Methods</h3>
|
||
<h4 id="refresh">refresh</h4>
|
||
<p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like so:</p>
|
||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">dataSpyList</span> <span class="o">=</span> <span class="p">[].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'[data-bs-spy="scroll"]'</span><span class="p">))</span>
|
||
<span class="nx">dataSpyList</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">dataSpyEl</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nx">bootstrap</span><span class="p">.</span><span class="nx">ScrollSpy</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">dataSpyEl</span><span class="p">)</span>
|
||
<span class="p">.</span><span class="nx">refresh</span><span class="p">()</span>
|
||
<span class="p">})</span>
|
||
</code></pre></div><h4 id="dispose">dispose</h4>
|
||
<p>Destroys an element’s scrollspy. (Removes stored data on the DOM element)</p>
|
||
<h4 id="getinstance">getInstance</h4>
|
||
<p><em>Static</em> method which allows you to get the scrollspy instance associated with a DOM element</p>
|
||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">scrollSpyContentEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'content'</span><span class="p">)</span>
|
||
<span class="kd">var</span> <span class="nx">scrollSpy</span> <span class="o">=</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">ScrollSpy</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">scrollSpyContentEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap scrollspy instance
|
||
</span></code></pre></div><h3 id="options">Options</h3>
|
||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-bs-</code>, as in <code>data-bs-offset=""</code>.</p>
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 100px;">Name</th>
|
||
<th style="width: 100px;">Type</th>
|
||
<th style="width: 50px;">Default</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>offset</code></td>
|
||
<td>number</td>
|
||
<td><code>10</code></td>
|
||
<td>Pixels to offset from top when calculating position of scroll.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>method</code></td>
|
||
<td>string</td>
|
||
<td><code>auto</code></td>
|
||
<td>Finds which section the spied element is in. <code>auto</code> will choose the best method to get scroll coordinates. <code>offset</code> will use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect"><code>Element.getBoundingClientRect()</code></a> method to get scroll coordinates. <code>position</code> will use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop"><code>HTMLElement.offsetTop</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft"><code>HTMLElement.offsetLeft</code></a> properties to get scroll coordinates.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>target</code></td>
|
||
<td>string | jQuery object | DOM element</td>
|
||
<td></td>
|
||
<td>Specifies element to apply Scrollspy plugin.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h3 id="events">Events</h3>
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 150px;">Event type</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>activate.bs.scrollspy</code></td>
|
||
<td>This event fires on the scroll element whenever a new item becomes activated by the scrollspy.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">firstScrollSpyEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'[data-bs-spy="scroll"]'</span><span class="p">)</span>
|
||
<span class="nx">firstScrollSpyEl</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'activate.bs.scrollspy'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||
<span class="c1">// do something...
|
||
</span><span class="c1"></span><span class="p">})</span>
|
||
</code></pre></div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
|
||
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
||
<div class="container">
|
||
<ul class="bd-footer-links ps-0 mb-3">
|
||
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
||
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
||
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
||
</ul>
|
||
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||
<p class="mb-0">Currently v5.0.0-beta3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||
|
||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|