Scrollspy

XS

Portrait Phones
<576px

SM

Landscape Phones
≥576px to <768px

MD

Tablets
≥768px to <992px

LG

Laptops
≥992px to <1200px

XL

Desktops
≥1200px

Scrollspy

sometext

First heading

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum consequuntur, aut optio id natus voluptates culpa. Cum, pariatur beatae error exercitationem cupiditate repellat. Blanditiis explicabo ea officiis exercitationem corporis placeat provident quasi pariatur inventore, harum dolorum officia repellendus, rem debitis dignissimos autem qui beatae deserunt et adipisci tenetur fuga ad.

Second heading

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum consequuntur, aut optio id natus voluptates culpa. Cum, pariatur beatae error exercitationem cupiditate repellat. Blanditiis explicabo ea officiis exercitationem corporis placeat provident quasi pariatur inventore, harum dolorum officia repellendus, rem debitis dignissimos autem qui beatae deserunt et adipisci tenetur fuga ad.

Third heading

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum consequuntur, aut optio id natus voluptates culpa. Cum, pariatur beatae error exercitationem cupiditate repellat. Blanditiis explicabo ea officiis exercitationem corporis placeat provident quasi pariatur inventore, harum dolorum officia repellendus, rem debitis dignissimos autem qui beatae deserunt et adipisci tenetur fuga ad.

Fourth heading

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum consequuntur, aut optio id natus voluptates culpa. Cum, pariatur beatae error exercitationem cupiditate repellat. Blanditiis explicabo ea officiis exercitationem corporis placeat provident quasi pariatur inventore, harum dolorum officia repellendus, rem debitis dignissimos autem qui beatae deserunt et adipisci tenetur fuga ad.

Fifth heading

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum consequuntur, aut optio id natus voluptates culpa. Cum, pariatur beatae error exercitationem cupiditate repellat. Blanditiis explicabo ea officiis exercitationem corporis placeat provident quasi pariatur inventore, harum dolorum officia repellendus, rem debitis dignissimos autem qui beatae deserunt et adipisci tenetur fuga ad.

Scrollspy [Nested nav]

sometext

Item 1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus, placeat! Accusantium repudiandae quod quibusdam debitis nisi recusandae! Porro nihil, similique repellat voluptate sapiente vel aliquam dicta fugiat dolor, quisquam neque nemo perspiciatis numquam iure magni cum hic. Aut, illo error. Consectetur, expedita corrupti. Dolores impedit fuga, blanditiis enim rerum praesentium aliquam unde ducimus voluptates ea porro sequi, nihil harum odio libero error deleniti, nemo atque labore ex. Ad ex natus odit illo ullam perferendis labore assumenda hic molestiae, accusamus distinctio in tempore repellendus exercitationem voluptatem laborum magni quaerat necessitatibus sit? Vero doloremque totam distinctio nisi voluptates, repellendus nam. Nobis quaerat blanditiis necessitatibus voluptates officiis aut numquam quia perspiciatis, eveniet voluptate incidunt dolorem quisquam sit recusandae, repellendus quo qui quae, placeat dolor corrupti! Alias quo cumque itaque minima iste maxime quos at. Aspernatur ullam nesciunt voluptate voluptas officia libero distinctio, optio rerum delectus praesentium asperiores ex autem iste nam ipsam ipsa rem exercitationem est? Vel quisquam tempora dolores accusantium delectus cum saepe accusamus odio, aperiam, quasi in debitis a, beatae repellat veniam vero. Quo ut esse enim corporis, aliquid delectus possimus saepe ullam voluptatum, ipsam, laboriosam id! Repellat asperiores obcaecati suscipit! Quia consectetur, ea explicabo labore, dicta eum ipsum enim est magnam velit maxime qui doloribus ex iste officiis optio dignissimos sit laboriosam accusamus non officia quidem nesciunt nam cumque. Dolore ut earum quasi consectetur maxime quis ad laboriosam aut odio quas adipisci minima aliquam officiis doloribus magnam numquam est quae quod tenetur, debitis beatae asperiores enim? Repellat facilis consectetur dolorum.

Item 1-1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus autem tempora, illum debitis corrupti consequatur consectetur laudantium deserunt magnam illo.

Item 1-2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus autem tempora, illum debitis corrupti consequatur consectetur laudantium deserunt magnam illo.

Item 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus autem tempora, illum debitis corrupti consequatur consectetur laudantium deserunt magnam illo.

Item 3

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni tenetur doloremque commodi necessitatibus magnam architecto, nam, ipsam laudantium quas facilis distinctio dolorem non quod, ipsum et numquam voluptas sequi esse! Illo, eveniet dolore. Repellat quasi quas quos, nulla veniam quae culpa modi reprehenderit mollitia assumenda dolores accusamus eaque quis iure! Quos asperiores praesentium numquam odit cumque magnam ad iste officiis, ea impedit, perspiciatis assumenda, officia aliquam dolore? Harum, consectetur sunt id enim non autem eum aut nihil soluta sapiente fugit mollitia reiciendis commodi! Dolore rerum nulla quos quaerat eius dignissimos, accusamus ipsum laudantium expedita vel eveniet. Sint, officia. Officia voluptatibus explicabo impedit quam, ex quae, amet doloremque esse doloribus beatae aspernatur sunt quaerat modi reiciendis voluptatum necessitatibus totam unde atque. Perspiciatis, quam delectus at ullam consequuntur excepturi sed debitis temporibus praesentium corporis ut, dolore dolores! Odit est commodi suscipit modi quam neque quaerat, omnis eveniet ut vitae consequatur laborum sapiente.

Item 3-1

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta molestiae ducimus et ab dolor, vitae laudantium voluptates maiores voluptatem atque velit placeat, hic ad! Perferendis veniam voluptatem aliquid vero, error nobis beatae sint minus debitis fugiat, quae facere temporibus aut ipsa. Ex est perspiciatis, necessitatibus quod doloribus nam doloremque sunt, consectetur totam tenetur excepturi minima ut distinctio sed? Amet, iste ea. Voluptates mollitia sint magni, quibusdam minus officiis aperiam nesciunt dolore. Cumque laudantium laboriosam fuga impedit magnam a eum excepturi eligendi provident. Fugiat tenetur id minus suscipit neque esse incidunt est voluptatibus dolorum iusto doloremque ducimus consequatur velit quibusdam eum corporis quia, corrupti cum facilis inventore quos rem alias molestiae maxime? Esse tempore ut suscipit eum itaque accusamus doloremque cupiditate! Repellendus quis assumenda aliquid. Libero odio minus voluptates, quisquam exercitationem repudiandae sunt, facere aut reiciendis possimus placeat ipsam numquam consectetur, voluptatem illo quaerat obcaecati assumenda consequatur deserunt. Expedita perferendis odit at quia quidem architecto quos officia est dolore laudantium autem adipisci, eum mollitia rerum? Odit odio ullam fuga placeat ducimus unde mollitia in deleniti ipsum quos, libero commodi delectus est eveniet accusamus. Beatae consectetur deleniti molestias quis deserunt inventore officia? Animi nisi accusantium voluptatum? Vitae ex quasi nostrum non saepe.

Item 3-2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto corrupti, numquam sit accusantium earum natus amet ratione eum vero ex consectetur eligendi unde esse suscipit aut, dolorem illum ea nisi. Laborum aliquid, doloribus aut placeat nisi soluta vitae fugiat earum atque, molestias eligendi quidem optio, perferendis cum! Explicabo, voluptatem quia. Quam asperiores distinctio soluta at fuga, quo enim sint nesciunt optio cum non quasi laborum ea repellat vero explicabo, laboriosam accusantium atque pariatur dolor ipsam debitis praesentium? Deserunt incidunt provident ipsum earum repellendus perspiciatis. Provident quae, soluta exercitationem omnis cupiditate praesentium repellat nemo! Optio est nobis, quae necessitatibus ea provident, consequuntur obcaecati nam possimus ducimus inventore voluptatum voluptatibus. Culpa laudantium explicabo quidem id? Distinctio dolore numquam sit reprehenderit laboriosam officia nam consequatur voluptatibus eum voluptatum neque ex ad dolorem nisi similique nesciunt officiis tempora, ipsam enim deserunt! Labore aliquid ex velit beatae. Nam similique, ab in id facilis molestiae quos officiis eligendi dignissimos unde adipisci quaerat itaque ipsa labore deserunt molestias veritatis eveniet cum enim odio! Accusamus neque optio ducimus dignissimos error itaque facere quia fugiat quaerat nihil. Eaque vel nisi eligendi saepe id sequi tenetur nobis rerum quo asperiores iure delectus temporibus dolorum voluptatum et maxime, nulla adipisci quasi?

Scrollspy [List Group]

sometext

Item 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ipsam aliquid velit, omnis exercitationem incidunt cumque perferendis aut quae enim quibusdam sapiente aliquam libero asperiores ullam ipsa, distinctio eum! Quae, ut, quibusdam, neque fugiat accusantium similique in libero iusto eveniet voluptates doloribus enim excepturi molestias. Repellendus pariatur neque odio accusamus voluptatibus? Facere delectus laudantium suscipit itaque explicabo corporis ea, eos illum recusandae rerum a perferendis voluptatem nihil vero tempora molestiae in culpa natus fuga possimus sunt. Laborum, ipsam laboriosam dignissimos earum necessitatibus asperiores commodi rerum nam, natus deleniti aliquam velit nobis esse consequuntur facilis accusamus et repellat dolorum ut harum sit, ad voluptatum quo fugiat! Enim, quos? Voluptates molestias, voluptatem voluptatibus alias ab consequuntur consectetur vel earum ipsum recusandae soluta! Molestiae porro rem, modi laboriosam provident eius saepe! Quas obcaecati nemo voluptate molestiae totam deserunt doloremque accusantium a, voluptatem sint culpa iure placeat reiciendis animi architecto similique consequatur! Consequatur a placeat accusamus ullam inventore perspiciatis iure, non veritatis provident minus doloremque modi quae nulla aliquam porro recusandae in ratione corrupti maiores. Fuga provident, distinctio dolor libero voluptatum eveniet, doloribus magnam ipsum incidunt, ab qui asperiores obcaecati recusandae dolore quia est! Saepe rem numquam aspernatur exercitationem eligendi atque soluta possimus, laboriosam voluptatibus laborum expedita id aperiam ipsum, distinctio doloremque ducimus? Perspiciatis excepturi a, adipisci dolores beatae id consectetur dolor numquam hic, fugiat deserunt blanditiis? Quod totam consequatur cum eius, eveniet vitae, qui natus molestiae repudiandae atque labore harum inventore nihil repellat quisquam. Blanditiis dolorum, reiciendis impedit itaque deleniti odio aperiam quas!

Item 2

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta modi perspiciatis alias officiis corrupti architecto exercitationem, eaque ipsum atque dolores nobis reprehenderit nulla beatae earum eius id unde pariatur, delectus ducimus? Placeat ea quam nisi quae eius molestias optio deserunt, at facere quisquam veritatis tempora perferendis mollitia temporibus consectetur odio cumque ipsam sunt a ad exercitationem. Vitae delectus quia labore beatae accusamus? Corrupti odit hic praesentium explicabo? Laboriosam nisi alias error dolorem, voluptates perferendis vel eligendi quibusdam voluptas nihil voluptatibus veniam doloribus voluptatum provident. Quae doloremque esse nobis, facere rerum dolorem. Fugit, omnis unde id nihil ab autem? Autem placeat itaque unde qui veritatis distinctio adipisci maiores similique corporis, officiis error quaerat eos pariatur animi inventore repudiandae. Amet explicabo sequi dignissimos minima neque est voluptatum nostrum voluptas velit quisquam consequatur molestiae aliquam, dolore inventore reprehenderit saepe. Dolorem et nostrum totam quidem laboriosam est nemo fugit expedita iusto natus voluptates repellendus repudiandae saepe delectus quibusdam sequi sint maiores qui modi consequuntur, eligendi eaque ipsa! Delectus odit voluptatibus distinctio laudantium voluptatum fugiat laborum quia dolorem dolorum voluptate perferendis minus, soluta eum ipsum dignissimos, mollitia aliquam quos magni? Natus soluta repellendus provident in possimus. Sapiente doloremque perspiciatis voluptates praesentium aspernatur voluptatem pariatur officiis!

Item 3

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio quisquam nostrum eum repellendus aliquid, suscipit maiores, consectetur magnam eius minima laudantium! Temporibus dignissimos, nobis possimus explicabo earum cupiditate ullam nam minus vel consequuntur sed voluptatum nihil, reprehenderit dolores magni dolorem maxime illum. Nemo fugit eveniet est expedita suscipit ullam nulla deleniti facere, id repellat quia, numquam rerum amet esse laborum ipsum minus doloribus repudiandae. A deserunt omnis molestias adipisci nulla esse suscipit commodi quasi cum quis eum, eos aliquam asperiores ipsam nisi laudantium pariatur ad delectus alias vero? Corporis cumque perferendis maiores nihil, quasi, distinctio at non sunt assumenda est in cupiditate nesciunt iusto tempora nisi culpa accusantium dolore itaque veniam harum adipisci accusamus. Fugit quasi, mollitia odit sed repellendus numquam possimus tempora quaerat veniam saepe voluptate praesentium similique magnam vitae qui minus commodi pariatur laboriosam voluptas sit quos aspernatur quo ea earum. Obcaecati repellendus fugit laborum quibusdam sequi. Amet, perferendis enim. Provident optio error tempore unde distinctio aliquid saepe reprehenderit nihil fugiat voluptates eos sunt in necessitatibus earum id inventore, officia sapiente aspernatur rem at. Autem, magnam qui pariatur voluptatibus eligendi delectus! Expedita voluptas qui ad doloribus, reiciendis id illo praesentium odit. Inventore vitae consectetur dolore voluptates quis optio aliquam minima ad harum perferendis suscipit pariatur dolor veritatis enim, ducimus, eligendi maiores accusamus soluta iste minus totam saepe velit corrupti maxime. Corrupti dolore ullam nam non? Consequatur illo vitae cum atque, veritatis nisi omnis fuga error quasi distinctio. Consectetur quam excepturi fugiat! Nam minima, rerum impedit nisi est at.

Item 4

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni, cum!

Sample Codes

<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="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</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="#scrollspyHeading3">Third</a>
</li>
<li>
<a class="dropdown-item" href="#scrollspyHeading4">Fourth</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="#scrollspyHeading5">Fifth</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="scrollspyHeading1">
First heading
</h4>
<p>...</p>
<h4 id="scrollspyHeading2">
Second heading
</h4>
<p>...</p>
<h4 id="scrollspyHeading3">
Third heading
</h4>
<p>...</p>
<h4 id="scrollspyHeading4">
Fourth heading
</h4>
<p>...</p>
<h4 id="scrollspyHeading5">
Fifth heading
</h4>
<p>...</p>
</div>


Note

add something like this in your CSS for it to work
.aw-scrollspy-example-3 {
position: relative;
height: 370px;
margin-top: 0.5rem;
overflow-y: scroll;
}

only margin-top is not necessary

Nested Nav
<div class="row">
<div class="col-6 col-sm-3">
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<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>
<a class="nav-link" href="#item-2">
Item 2
</a>
<a class="nav-link" href="#item-3">
Item 3
</a>
</nav>
<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-6 col-sm-9">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="aw-scrollspy-example" tabindex="0">
<h4 id="item-1">
Item 1
</h4>
<p>
...
</p>
<h5 id="item-1-1">
Item 1-1
</h5>
<p>
...
</p>
<h5 id="item-1-2">
Item 1-2
</h5>
<p>
...
</p>
<h4 id="item-2">
Item 2
</h4>
<p>
...
</p>
<h4 id="item-3">
Item 3
</h4>
<p>
...
</p>
<h5 id="item-3-1">
Item 3-1
</h5>
<p>
...
</p>
<h5 id="item-3-2">
Item 3-2
</h5>
<p>
...
</p>
</div>
</div>
</div>