UIkit 3 Table of Contents – Sticky Sidebar on Scroll

This UIkit snippet, was created to help web designers, front-end developers and back-end developer save time. Use it in your project and build your app faster, You can also download the HTML, CSS, and JS code.

Build with UIkit 3.3.7 in Sticky, update June 17, 2020

  • <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
    
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
    
    <div class="uk-container">
    	<div uk-grid>
    		<div class="[email protected]">
    			<div class="uk-padding-large">
    				<article class="uk-article">
    					<h1 class="uk-article-title">What is Lorem Ipsum?</h1>
    					<p class="uk-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet ipsum tortor, ac aliquet dui porta a. Sed vitae mauris convallis, facilisis ex bibendum, ullamcorper ante</p>
    					<h2 class="uk-margin-small-bottom" id="a">Introduction</h2>
    					<p class="uk-margin-small-top">Mauris id turpis sit amet odio convallis faucibus. Nunc et lorem consectetur, rhoncus arcu at, feugiat mi. Integer dapibus porttitor mi, eget egestas nibh posuere a. Nullam luctus, dolor non molestie eleifend, purus nunc laoreet justo, quis placerat quam est sit amet velit. Aliquam non lorem nisl. Fusce at fringilla nulla, eu consequat tellus. Morbi volutpat accumsan turpis ac malesuada. Integer sed elit non augue interdum porta. Cras egestas gravida pellentesque. Etiam et lacus in ipsum dapibus dapibus ut id est. Integer ut ultricies nunc. In maximus varius augue ultricies fringilla. Phasellus maximus nunc ornare ipsum tincidunt, non dapibus augue facilisis. Maecenas tristique consectetur hendrerit. Aliquam imperdiet neque et dui ultricies, ut vestibulum magna tincidunt.</p>
    					<h3 class="uk-margin-small-bottom" id="a1">Licence</h3>
    					<p class="uk-margin-small-top">Morbi hendrerit in dolor vulputate maximus. Nam mattis orci vel lacinia pulvinar. Aliquam dignissim diam sit amet purus dictum congue. Quisque malesuada, eros eu ornare rutrum, dolor sem molestie diam, id ultrices lectus velit in lorem. In cursus justo sed eleifend vehicula. Sed quis cursus nibh. Suspendisse euismod turpis sit amet ultricies posuere. Proin ac tellus tellus. Cras tincidunt elit nec metus sodales, elementum congue lacus tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus commodo quam sed posuere.</p>
    					<ol class="uk-margin-medium">
    						<li>Lorem ipsum dolor sit amet.</li>
    						<li>Lorem ipsum dolor sit amet.</li>
    						<li>Lorem ipsum dolor sit amet.</li>
    					</ol>
    					<h2 class="uk-margin-small-bottom" id="b">Installation</h2>
    					<p class="uk-margin-small-top">Quisque at vulputate dolor, sit amet bibendum massa. Ut vehicula et lectus at rutrum. Aenean id dapibus sem. Maecenas porttitor est dui, eget placerat orci dapibus sed. Sed faucibus commodo mattis. Vivamus pulvinar ex massa, et feugiat felis dictum id. Fusce condimentum pulvinar suscipit. Phasellus est purus, fermentum eu tempor ut, egestas vel orci. Praesent dignissim lobortis malesuada. Etiam lorem urna, pellentesque a tincidunt sit amet, mattis eget ligula. Proin placerat mi orci, ac eleifend magna fringilla ut. Nam et dictum dolor. Nam quis dui sed magna faucibus rhoncus. Quisque quam turpis, dictum vel lectus suscipit, bibendum sodales erat. Quisque quis congue ex.</p>
    					<h3 class="uk-margin-small-bottom" id="b1">System requirements check</h3>
    					<p class="uk-margin-small-top">Nunc et lacus risus. In pulvinar lectus et magna facilisis, at rhoncus nunc eleifend. Ut egestas porttitor odio vel pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ornare felis. Donec ultricies, turpis elementum vestibulum pretium, lacus ligula lacinia nibh, et blandit ex neque id ipsum. Donec malesuada cursus tempus. In in bibendum ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae dui sed justo mattis faucibus. Maecenas nec nibh est. Duis quis efficitur dui, eget efficitur turpis. Etiam consectetur sem in lectus ornare, a ornare elit ullamcorper. Nulla facilisi. In interdum molestie mollis. Cras laoreet, nisi nec condimentum facilisis, velit lectus posuere felis, sed sollicitudin neque dolor et lorem.</p>
    					<h3 class="uk-margin-small-bottom" id="b2">Download and install</h3>
    					<p class="uk-margin-small-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacus nisi, cursus non nisi vel, lacinia facilisis tortor. Nullam vehicula leo sem, lacinia eleifend ante lobortis nec. Proin a finibus lorem. Duis ante leo, suscipit quis feugiat ac, iaculis vitae justo. Ut at rhoncus sapien, nec accumsan diam. Vivamus molestie nisl vel ligula hendrerit, non volutpat tellus congue. Morbi commodo in arcu finibus laoreet. Ut efficitur sapien nec ligula vulputate imperdiet.</p>
    					<h2 class="uk-margin-small-bottom" id="c">Backup</h2>
    					<p class="uk-margin-small-top">Quisque purus odio, mollis at quam nec, rhoncus tempor sapien. Pellentesque finibus elit arcu, non pulvinar tortor cursus id. In rhoncus ac eros vel vestibulum. Maecenas massa urna, ornare at felis sit amet, lacinia efficitur arcu. Pellentesque sit amet odio id massa condimentum pulvinar sed sit amet ipsum. Fusce rhoncus, libero vitae molestie pellentesque, ipsum nisi vulputate ex, vulputate tincidunt metus magna sed ipsum. Pellentesque lobortis mollis magna, non hendrerit metus aliquet eu.</p>
    					<h2 class="uk-margin-small-bottom" id="d">Recovery</h2>
    					<p class="uk-margin-small-top">Sed tempor urna nec est vulputate egestas. Sed at scelerisque orci, quis tristique leo. Quisque et dolor eget arcu semper ultricies id eu ante. Mauris dignissim bibendum nulla sed aliquam. Nunc consequat purus magna, et malesuada metus porttitor ac. Vivamus et neque ullamcorper, consequat ligula eget, fringilla nulla. Maecenas a neque sapien. Nunc vulputate magna orci, et malesuada velit ultrices eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce aliquam velit ut interdum mollis. Suspendisse placerat lacus a lectus venenatis cursus vel ut orci. Morbi sodales dolor in sem dictum, in pulvinar risus finibus. Nullam eleifend nec nisi sit amet condimentum.</p>
    				</article>
    			</div>
    		</div>
    		<div class="[email protected]">
    			<div class="[email protected]" uk-sticky="offset: 40; bottom: #article;">
    				<h2>Table of Contents</h2>
    				<div>
    					<div uk-scrollspy-nav="closest: a; scroll: true; offset: 40;">
    						<ul class="uk-list">
    							<li><a href="#a">Introduction</a></li>
    							<li><a href="#a1">Licence</a></li>
    							<li><a href="#b">nstallation</a></li>
    							<li><a href="#b1">System requirements check</a></li>
    							<li><a href="#b2">Download and install</a></li>
    							<li><a href="#c">Backup</a></li>
    							<li><a href="#d">Recovery</a></li>
    						</ul>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
  • <!-- CSS -->
  • <!-- JS -->

LEAVE A COMMENT

Your email address will not be published. Required fields are marked *

Related Snippets