Navbar
Scroll the area below the navbar and watch the active class change. Open the dropdown menu and watch the dropdown items be highlighted as well.
First heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, pariatur. Praesentium, sunt minus! Sequi quisquam quae suscipit eius quidem debitis expedita atque maiores? Dicta enim corporis, molestias alias tenetur a esse unde sed aliquam sint deleniti possimus. Eos ipsam quam, expedita ea maxime maiores accusantium nam ab dignissimos repudiandae aut! Sequi eligendi provident odit sint suscipit illo, doloribus velit tenetur dolore ea, iusto fuga, aliquam neque quo unde molestiae. Distinctio.
Second heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, pariatur. Praesentium, sunt minus! Sequi quisquam quae suscipit eius quidem debitis expedita atque maiores? Dicta enim corporis, molestias alias tenetur a esse unde sed aliquam sint deleniti possimus. Eos ipsam quam, expedita ea maxime maiores accusantium nam ab dignissimos repudiandae aut! Sequi eligendi provident odit sint suscipit illo, doloribus velit tenetur dolore ea, iusto fuga, aliquam neque quo unde molestiae. Distinctio.
Third heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, pariatur. Praesentium, sunt minus! Sequi quisquam quae suscipit eius quidem debitis expedita atque maiores? Dicta enim corporis, molestias alias tenetur a esse unde sed aliquam sint deleniti possimus. Eos ipsam quam, expedita ea maxime maiores accusantium nam ab dignissimos repudiandae aut! Sequi eligendi provident odit sint suscipit illo, doloribus velit tenetur dolore ea, iusto fuga, aliquam neque quo unde molestiae. Distinctio.
Fourth heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, pariatur. Praesentium, sunt minus! Sequi quisquam quae suscipit eius quidem debitis expedita atque maiores? Dicta enim corporis, molestias alias tenetur a esse unde sed aliquam sint deleniti possimus. Eos ipsam quam, expedita ea maxime maiores accusantium nam ab dignissimos repudiandae aut! Sequi eligendi provident odit sint suscipit illo, doloribus velit tenetur dolore ea, iusto fuga, aliquam neque quo unde molestiae. Distinctio.
Fifth heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, pariatur. Praesentium, sunt minus! Sequi quisquam quae suscipit eius quidem debitis expedita atque maiores? Dicta enim corporis, molestias alias tenetur a esse unde sed aliquam sint deleniti possimus. Eos ipsam quam, expedita ea maxime maiores accusantium nam ab dignissimos repudiandae aut! Sequi eligendi provident odit sint suscipit illo, doloribus velit tenetur dolore ea, iusto fuga, aliquam neque quo unde molestiae. Distinctio.
Nested nav
Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active. Scroll the area next to the navbar and watch the active class change.
Item 1
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic voluptatem necessitatibus sit! Voluptatibus nesciunt ullam perspiciatis nam excepturi quo aspernatur. Laborum voluptatum deserunt odio, impedit blanditiis totam quisquam quidem quas, laudantium non porro a dicta exercitationem neque dignissimos repellat! Quam!
Item 1-1
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic voluptatem necessitatibus sit! Voluptatibus nesciunt ullam perspiciatis nam excepturi quo aspernatur. Laborum voluptatum deserunt odio, impedit blanditiis totam quisquam quidem quas, laudantium non porro a dicta exercitationem neque dignissimos repellat! Quam!
Item 1-2
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic voluptatem necessitatibus sit! Voluptatibus nesciunt ullam perspiciatis nam excepturi quo aspernatur. Laborum voluptatum deserunt odio, impedit blanditiis totam quisquam quidem quas, laudantium non porro a dicta exercitationem neque dignissimos repellat! Quam!
Item 2
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic voluptatem necessitatibus sit! Voluptatibus nesciunt ullam perspiciatis nam excepturi quo aspernatur. Laborum voluptatum deserunt odio, impedit blanditiis totam quisquam quidem quas, laudantium non porro a dicta exercitationem neque dignissimos repellat! Quam!
Item 3
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic voluptatem necessitatibus sit! Voluptatibus nesciunt ullam perspiciatis nam excepturi quo aspernatur. Laborum voluptatum deserunt odio, impedit blanditiis totam quisquam quidem quas, laudantium non porro a dicta exercitationem neque dignissimos repellat! Quam!
Item 3-1
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic voluptatem necessitatibus sit! Voluptatibus nesciunt ullam perspiciatis nam excepturi quo aspernatur. Laborum voluptatum deserunt odio, impedit blanditiis totam quisquam quidem quas, laudantium non porro a dicta exercitationem neque dignissimos repellat! Quam!
Item 3-2
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic voluptatem necessitatibus sit! Voluptatibus nesciunt ullam perspiciatis nam excepturi quo aspernatur. Laborum voluptatum deserunt odio, impedit blanditiis totam quisquam quidem quas, laudantium non porro a dicta exercitationem neque dignissimos repellat! Quam!
List group
Scrollspy also works with .list-groups. Scroll the area next to the list group and watch the active class change.
Item 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate nostrum excepturi sapiente qui incidunt amet! Minima incidunt quis nesciunt, obcaecati vero magni praesentium, ea illo tempore eum accusamus error amet.
Item 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate nostrum excepturi sapiente qui incidunt amet! Minima incidunt quis nesciunt, obcaecati vero magni praesentium, ea illo tempore eum accusamus error amet.
Item 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate nostrum excepturi sapiente qui incidunt amet! Minima incidunt quis nesciunt, obcaecati vero magni praesentium, ea illo tempore eum accusamus error amet.
Item 4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate nostrum excepturi sapiente qui incidunt amet! Minima incidunt quis nesciunt, obcaecati vero magni praesentium, ea illo tempore eum accusamus error amet.