On Page Nav (Scroll Spy)

Implementation

The in-page nav utilizes some specific classes make it stick to the side of the page as the user scrolls and a data-attribute to animate the scrolling to the in-page anchor. The class nav-onpage-[sm/md/lg/xl]-sticky can make the navigation "sticky" only at specific breakpoints.

More Info

Learn more about scroll spy here

Scrolling Animation

The scrolling animation functions independently of the sticky nav. Adding the a data-scrolling="yes" attribute to any link will make the link scroll the page to the anchors location and take into account the fix navigation bar. If you have in-page links and don't use that property, the page will jump to a spot too far down and possibly confuse the user.

When to use in-page navigation

In-page navigation is an excellent option when you may be considering useing collapsed or hidden content. It provides the user an optional way to jump to the content without forcing them to click anything. It also allows them to still easily scroll and scan content better than accordions. If you will have nested levels of in-page navigation, we suggest using the class text-shrink-1 on the lower levels to help differentiate to the user between the levels if that is important.

<h1 class="mb-2">On Page Nav (Scroll Spy)</h1>
<div class="row my-3">
	<div class="col-lg-8 order-lg-1 order-2">
		<h2 class="mt-0" id="implementation">Implementation</h2>
		<p>The in-page nav utilizes some specific classes make it stick to the side of the page as the user scrolls and a data-attribute to animate the scrolling to the in-page anchor. The class <code>nav-onpage-[sm/md/lg/xl]-sticky</code> can make the navigation "sticky" only at specific breakpoints. See Example <a xmlns:ouc="http://omniupdate.com/XSL/Variables" href="https://www.usu.edu/template/guide/elements/in-page-nav.cfm">here</a></p>
		<div class="inlinealert inlinealert-info">
			<div>
				<i class="fas fa-info"></i>
			</div>
			<div>
				<div class="inlinealert-title">More Info</div>
				<div class="inlinealert-body">
						Learn more about scroll spy <a xmlns:ouc="http://omniupdate.com/XSL/Variables" href="https://www.usu.edu/template/guide/elements/in-page-nav.cfm">here</a>
				</div>
			</div>
		</div>
		<h2 class="mt-3" id="animation">Scrolling Animation</h2>
		<p>The scrolling animation functions independently of the sticky nav. Adding the a <code>data-scrolling="yes"</code> attribute to any link will make the link scroll the page to the anchors location <strong>and</strong> take into account the fix navigation bar. If you have in-page links and don't use that property, the page will jump to a spot too far down and possibly confuse the user.</p>
		<h2 id="when">When to use in-page navigation</h2>
		<p>In-page navigation is an excellent option when you may be considering useing collapsed or hidden content. It provides the user an <strong>optional</strong> way to jump to the content without forcing them to click anything. It also allows them to still easily scroll and scan content better than accordions. If you will have nested levels of in-page navigation, we suggest using the class <code>text-shrink-1</code> on the lower levels to help differentiate to the user between the levels if that is important.</p>
	</div>
	<div class="col-lg-4 order-lg-2 order-1">
		<div class="nav-onpage nav-onpage-lg-sticky">
			<h2 class="h4 text-bold">On This Page</h2>
			<ul class="nav flex-column" id="scrollspy476256">
				<li class="nav-item"><a data-scrolling="yes" href="#implementation" class="nav-link">Implementation</a></li>
				<li class="nav-item"><a data-scrolling="yes" href="#animation" class="nav-link">Scrolling Animation</a></li>
				<li class="nav-item"><a data-scrolling="yes" href="#when" class="nav-link">When to Use</a></li>
			</ul>
		</div>
	</div>
</div>

Important!

Code must be manually copied after selected