Below, I have a simple sticky navigation. When I scroll to a particular element on the page, I'm able to see an active class applied to that navigation item. But, when I click on the navigation item, I'm able to scroll to it, but the active class quickly flashes and then goes away. I think it's an issue with the height of the element, but I'm not sure.
Why doesn't the active class apply when the nav item is clicked on?
$(document).ready(function () {
$(document).on("scroll", onScroll);
});
function onScroll(event) {
let scrollPosition = $(document).scrollTop();
$("aside a").each(function () {
let currentLink = $(this);
let refElement = $(currentLink.attr("href"));
if (
refElement.position().top <= scrollPosition &&
refElement.position().top refElement.height() > scrollPosition
) {
$("aside a").removeClass("clicked");
currentLink.addClass("clicked");
} else {
currentLink.removeClass("clicked");
}
});
}/* Duru Sans */
@import url("https://fonts.googleapis.com/css2?family=Duru Sans&display=swap");
body {
font-family: "Duru Sans", sans-serif;
}
html {
scroll-behavior: smooth;
}
.content {
padding: 1rem;
}
.inner__content {
display: flex;
position: relative;
}
.inner__content aside.nav {
display: none;
}
@media (min-width: 576px) {
.inner__content aside.nav {
display: flex;
flex-direction: column;
margin-right: 2.5rem;
min-width: 260px;
height: 300px;
position: sticky;
top: 8rem;
}
.inner__content aside.nav ul {
margin: 0;
padding: 0;
list-style: none;
margin: 1.5rem 0;
}
.inner__content aside.nav ul li {
margin: 1rem 0;
font-size: 1rem;
line-height: 1.5rem;
display: flex;
align-items: center;
}
.inner__content aside.nav ul li:first-child, .inner__content aside.nav ul li:last-child {
margin-top: 0;
}
.inner__content aside.nav ul li a {
text-decoration: none;
color: #6d7582;
transition: all 0.2s ease;
}
.inner__content aside.nav ul li a:hover, .inner__content aside.nav ul li a:focus-visible {
color: #005fec;
}
.inner__content aside.nav ul li a.clicked {
border-left: 4px solid #005fec;
color: #005fec;
height: 1.5rem;
padding-left: 0.5rem;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="inner__content">
<div class="desktop-plus">
<aside class="nav">
<h6 class="kicker kicker--bold">On this page:</h6>
<ul>
<li class="small" data-toc-idx="0">
<a class="ccc-nav" href="#definition">What is it?</a>
</li>
<li class="small" data-toc-idx="1">
<a class="ccc-nav" href="#ccvcc">What is A vs. B?</a>
</li>
<li class="small" data-toc-idx="2">
<a class="ccc-nav" href="#features">Features</a>
</li>
<li class="small" data-toc-idx="3">
<a class="ccc-nav" href="#onOff">On-site vs. Off-site</a>
</li>
<li class="small" data-toc-idx="4">
<a class="ccc-nav" href="#pricing">Pricing</a>
</li>
<li class="small" data-toc-idx="5">
<a class="ccc-nav" href="#whyUs">Why us?</a>
</li>
<li class="small" data-toc-idx="6">
<a class="ccc-nav" href="#faq">FAQs</a>
</li>
</ul>
</aside>
</div>
<div class="primary-content">
<h2 id="definition" class="sticky-nav">What is a it?</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<h2 id="ccvcc" class="sticky-nav">What is A vs. B?</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<h2 id="features" class="sticky-nav">Some features</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<div class="table tablet-plus">
<h2 class="table__header" id="onOff">On-site vs. Off-site</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
</div>
<h2 class="sticky-nav" id="pricing">Some pricing facts</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<div id="whyUs" class="why sticky-nav tablet-plus">
<h2>Why us? For real!</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
</div>
<h2 class="sticky-nav" id="faq">Some common questions</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
</div>
</div>
</div>CodePudding user response：
I've passed the 'current' item outside of the .each function. There are probably more effective ways of doing this though.
$(document).ready(function () {
$(document).on("scroll", onScroll);
});
function onScroll(event) {
let scrollPosition = $(document).scrollTop();
let current;
$("aside a").removeClass("clicked");
$("aside a").each(function () {
let currentLink = $(this);
let refElement = $(currentLink.attr("href"));
if ( refElement.position().top <= scrollPosition ) {
current = $(this);
}
});
current.addClass("clicked");
}/* Duru Sans */
@import url("https://fonts.googleapis.com/css2?family=Duru Sans&display=swap");
body {
font-family: "Duru Sans", sans-serif;
}
html {
scroll-behavior: smooth;
}
.content {
padding: 1rem;
}
.inner__content {
display: flex;
position: relative;
}
.inner__content aside.nav {
display: none;
}
@media (min-width: 576px) {
.inner__content aside.nav {
display: flex;
flex-direction: column;
margin-right: 2.5rem;
min-width: 260px;
height: 300px;
position: sticky;
top: 8rem;
}
.inner__content aside.nav ul {
margin: 0;
padding: 0;
list-style: none;
margin: 1.5rem 0;
}
.inner__content aside.nav ul li {
margin: 1rem 0;
font-size: 1rem;
line-height: 1.5rem;
display: flex;
align-items: center;
}
.inner__content aside.nav ul li:first-child, .inner__content aside.nav ul li:last-child {
margin-top: 0;
}
.inner__content aside.nav ul li a {
text-decoration: none;
color: #6d7582;
transition: all 0.2s ease;
}
.inner__content aside.nav ul li a:hover, .inner__content aside.nav ul li a:focus-visible {
color: #005fec;
}
.inner__content aside.nav ul li a.clicked {
border-left: 4px solid #005fec;
color: #005fec;
height: 1.5rem;
padding-left: 0.5rem;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="inner__content">
<div class="desktop-plus">
<aside class="nav">
<h6 class="kicker kicker--bold">On this page:</h6>
<ul>
<li class="small" data-toc-idx="0">
<a class="ccc-nav" href="#definition">What is it?</a>
</li>
<li class="small" data-toc-idx="1">
<a class="ccc-nav" href="#ccvcc">What is A vs. B?</a>
</li>
<li class="small" data-toc-idx="2">
<a class="ccc-nav" href="#features">Features</a>
</li>
<li class="small" data-toc-idx="3">
<a class="ccc-nav" href="#onOff">On-site vs. Off-site</a>
</li>
<li class="small" data-toc-idx="4">
<a class="ccc-nav" href="#pricing">Pricing</a>
</li>
<li class="small" data-toc-idx="5">
<a class="ccc-nav" href="#whyUs">Why us?</a>
</li>
<li class="small" data-toc-idx="6">
<a class="ccc-nav" href="#faq">FAQs</a>
</li>
</ul>
</aside>
</div>
<div class="primary-content">
<h2 id="definition" class="sticky-nav">What is a it?</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<h2 id="ccvcc" class="sticky-nav">What is A vs. B?</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<h2 id="features" class="sticky-nav">Some features</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<div class="table tablet-plus">
<h2 class="table__header" id="onOff">On-site vs. Off-site</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
</div>
<h2 class="sticky-nav" id="pricing">Some pricing facts</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<div id="whyUs" class="why sticky-nav tablet-plus">
<h2>Why us? For real!</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
</div>
<h2 class="sticky-nav" id="faq">Some common questions</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
</div>
</div>
</div>