Hide div before reaching footer

Hide div before reaching footer - javascript

I have the follow HTML and js code snippets make using the UIKIT css framework,
I'm trying to hide left side sticky div on reaching the parallax div container.
Codepen link
I tried to the following js code for this purpose but I've been unable to do so.
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById('side-content').style.display='none';
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<div class="uk-container">
<div class="uk-text-center" uk-grid>
<div class="uk-width-1-4">
<div class="uk-panel uk-text-center" id="side-content" style="z-index: 980;" uk-sticky="bottom: #offset">
<div class="uk-card uk-card-primary uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="uk-width-3-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ipsam at unde placeat et nulla maxime maiores, repudiandae, perspiciatis ipsum ea error tenetur temporibus voluptatibus illo atque eaque eius autem aliquam! Saepe ipsam corrupti culpa
earum placeat, aliquam esse ad ducimus harum beatae facere delectus minima minus perspiciatis totam laboriosam sint quaerat reprehenderit illum hic quam et eius. Veritatis praesentium officia modi, alias quos, iste voluptate quisquam quasi, labore
sunt consectetur at inventore consequatur esse recusandae ipsam veniam dignissimos. Id explicabo nihil magnam vel dolorum cumque minus recusandae officiis illo architecto, dolor voluptates placeat aut ex quasi quos aliquid qui quisquam odit, nisi.
Asperiores eveniet recusandae, natus ipsum placeat similique ad. Dolorum quia, hic optio odio illo ut sit quibusdam distinctio maxime fugiat.</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora quia similique, error iusto repudiandae explicabo neque doloribus eos dolorum eum perspiciatis. Maxime vero dolore facilis perferendis aspernatur fuga sit, quisquam a vel sunt impedit minus eos consequatur maiores quibusdam repellat qui! Praesentium labore enim eveniet dolores soluta! Accusamus recusandae sequi neque fugit, error corporis! Similique error, maiores quae facere voluptas reprehenderit excepturi eaque, eveniet ea quas odit labore? Eius aliquid ab tenetur nemo debitis nulla expedita inventore totam eos. Ullam totam eligendi inventore dolorem praesentium explicabo unde architecto laboriosam qui voluptate. Hic cum dicta dolor non aperiam, voluptatem, error deserunt velit eligendi tempora eos! Recusandae, tempore! Pariatur laudantium eaque molestiae soluta dolore nam porro, alias, quis similique accusantium accusamus voluptas dicta, cupiditate blanditiis. Quisquam doloribus voluptates, reiciendis excepturi animi saepe autem fugiat impedit rem eius deserunt dolorem porro architecto fuga officia sint explicabo, similique quam omnis molestias dolore quibusdam temporibus incidunt iure! Illo, distinctio blanditiis. Debitis animi qui dignissimos deserunt a ab dicta adipisci veniam quas, explicabo voluptatem possimus asperiores. Nihil vero rerum sapiente incidunt, libero laudantium nisi numquam, ullam dolore optio unde molestias error labore est! Nemo, repudiandae maxime aperiam vel sed itaque voluptatum. A nobis obcaecati, accusamus ad aliquid nulla harum? Nobis consequuntur reprehenderit accusantium illum et suscipit officia ipsam saepe, adipisci laboriosam fugit cumque dolorem fuga vitae est quisquam amet tenetur facilis vel eius. Doloribus est officia aperiam. Modi sed voluptates ullam accusantium accusamus quas velit, cum aspernatur at quia illo? Tempore corporis maxime eligendi ullam sapiente temporibus, excepturi incidunt ipsam. Velit necessitatibus optio saepe dicta fugit deserunt in fuga, nesciunt, accusamus repellat, eos voluptatem? Deserunt necessitatibus iste autem, eos quas explicabo voluptas facilis blanditiis est! Quasi veniam ut ab minima voluptatibus vitae sint maxime at? Nemo animi ab enim nisi eveniet, distinctio minus saepe iure a amet quod laudantium architecto laboriosam vero eum tempora fugit aut doloribus quisquam quaerat accusamus facilis minima officiis culpa! Nesciunt pariatur sequi hic, debitis enim harum molestias reiciendis eaque mollitia laboriosam ipsa officiis voluptates, labore asperiores blanditiis ducimus, autem quasi sunt. Impedit, temporibus molestiae obcaecati minima vel cumque accusantium blanditiis eligendi rem explicabo qui corporis quia! Possimus dolorum quaerat asperiores ad eaque odit labore ipsam, numquam voluptate accusamus, vitae praesentium alias autem delectus eius natus earum adipisci assumenda aliquid. Velit similique deleniti facere suscipit odio commodi quidem, nesciunt dignissimos quam odit quos dolorum sequi esse, mollitia est, culpa magni rem dicta. Quos nostrum odit adipisci facere recusandae alias ea quia voluptates soluta quibusdam modi placeat animi minus doloribus quam provident unde explicabo, officia dolores architecto praesentium obcaecati. Mollitia est cum nulla quo? Ullam atque fugiat unde porro, corrupti mollitia iste. Eos inventore ad consectetur, maiores dolore ipsum non! Officiis atque ea accusantium ex tempora delectus explicabo eaque amet, deserunt nobis velit, harum dolor. Vitae, alias assumenda? Aliquam mollitia eos, dolorem alias ut deserunt temporibus, et quas est hic excepturi repellendus blanditiis quo? Corporis aspernatur laboriosam sequi? Non doloribus natus dolor tempora, tempore eaque illum quas veritatis accusantium unde laboriosam deserunt.
</div>
</div>
</div>
<div class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('https://source.unsplash.com/1200x550/?nature');">
<h1 class="uk-width-1-2#m uk-text-center uk-margin-auto uk-margin-auto-vertical">Headline</h1>
</div>
<footer class="uk-background-primary">
<div class="container" uk-grid>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
</div>
</footer>
I would be very helpful if anyone could suggest how can hide the div.

Adding this function will get you the exact element position so you can adjust your code accordingly.
document.onscroll = function() {
var div = document.getElementsByClassName("uk-height-large");
var divOffset = offset(div[0]);
if (window.innerHeight + window.scrollY > divOffset.top + 250) {
document.getElementById('side-content').style.display='none';
}
else{
document.getElementById('side-content').style.display='block';
}
}
function offset(el) {
var rect = el.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}

Use getBoundingClientRect on your parallax element.
The Element.getBoundingClientRect() method returns the size of an
element and its position relative to the viewport.
It returns an object with different properties, where one is "top". Simply subtract top by the window.innerHeight and if it's <= 0 then it has appeared in the view port.
let sideC = document.getElementById("side-content");
let paral = document.getElementById("parallax");
window.addEventListener("scroll", function() {
if(paral.getBoundingClientRect().top - window.innerHeight <= 0){
$(sideC).fadeOut(1000);
} else {
$(sideC).fadeIn(1000);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<div class="uk-container">
<div class="uk-text-center" uk-grid>
<div class="uk-width-1-4">
<div class="uk-panel uk-text-center" id="side-content" style="z-index: 980;" uk-sticky="bottom: #offset">
<div class="uk-card uk-card-primary uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="uk-width-3-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ipsam at unde placeat et nulla maxime maiores, repudiandae, perspiciatis ipsum ea error tenetur temporibus voluptatibus illo atque eaque eius autem aliquam! Saepe ipsam corrupti culpa
earum placeat, aliquam esse ad ducimus harum beatae facere delectus minima minus perspiciatis totam laboriosam sint quaerat reprehenderit illum hic quam et eius. Veritatis praesentium officia modi, alias quos, iste voluptate quisquam quasi, labore
sunt consectetur at inventore consequatur esse recusandae ipsam veniam dignissimos. Id explicabo nihil magnam vel dolorum cumque minus recusandae officiis illo architecto, dolor voluptates placeat aut ex quasi quos aliquid qui quisquam odit, nisi.
Asperiores eveniet recusandae, natus ipsum placeat similique ad. Dolorum quia, hic optio odio illo ut sit quibusdam distinctio maxime fugiat.</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora quia similique, error iusto repudiandae explicabo neque doloribus eos dolorum eum perspiciatis. Maxime vero dolore facilis perferendis aspernatur fuga sit, quisquam a vel sunt impedit
minus eos consequatur maiores quibusdam repellat qui! Praesentium labore enim eveniet dolores soluta! Accusamus recusandae sequi neque fugit, error corporis! Similique error, maiores quae facere voluptas reprehenderit excepturi eaque, eveniet ea
quas odit labore? Eius aliquid ab tenetur nemo debitis nulla expedita inventore totam eos. Ullam totam eligendi inventore dolorem praesentium explicabo unde architecto laboriosam qui voluptate. Hic cum dicta dolor non aperiam, voluptatem, error
deserunt velit eligendi tempora eos! Recusandae, tempore! Pariatur laudantium eaque molestiae soluta dolore nam porro, alias, quis similique accusantium accusamus voluptas dicta, cupiditate blanditiis. Quisquam doloribus voluptates, reiciendis excepturi
animi saepe autem fugiat impedit rem eius deserunt dolorem porro architecto fuga officia sint explicabo, similique quam omnis molestias dolore quibusdam temporibus incidunt iure! Illo, distinctio blanditiis. Debitis animi qui dignissimos deserunt
a ab dicta adipisci veniam quas, explicabo voluptatem possimus asperiores. Nihil vero rerum sapiente incidunt, libero laudantium nisi numquam, ullam dolore optio unde molestias error labore est! Nemo, repudiandae maxime aperiam vel sed itaque voluptatum.
A nobis obcaecati, accusamus ad aliquid nulla harum? Nobis consequuntur reprehenderit accusantium illum et suscipit officia ipsam saepe, adipisci laboriosam fugit cumque dolorem fuga vitae est quisquam amet tenetur facilis vel eius. Doloribus est
officia aperiam. Modi sed voluptates ullam accusantium accusamus quas velit, cum aspernatur at quia illo? Tempore corporis maxime eligendi ullam sapiente temporibus, excepturi incidunt ipsam. Velit necessitatibus optio saepe dicta fugit deserunt
in fuga, nesciunt, accusamus repellat, eos voluptatem? Deserunt necessitatibus iste autem, eos quas explicabo voluptas facilis blanditiis est! Quasi veniam ut ab minima voluptatibus vitae sint maxime at? Nemo animi ab enim nisi eveniet, distinctio
minus saepe iure a amet quod laudantium architecto laboriosam vero eum tempora fugit aut doloribus quisquam quaerat accusamus facilis minima officiis culpa! Nesciunt pariatur sequi hic, debitis enim harum molestias reiciendis eaque mollitia laboriosam
ipsa officiis voluptates, labore asperiores blanditiis ducimus, autem quasi sunt. Impedit, temporibus molestiae obcaecati minima vel cumque accusantium blanditiis eligendi rem explicabo qui corporis quia! Possimus dolorum quaerat asperiores ad eaque
odit labore ipsam, numquam voluptate accusamus, vitae praesentium alias autem delectus eius natus earum adipisci assumenda aliquid. Velit similique deleniti facere suscipit odio commodi quidem, nesciunt dignissimos quam odit quos dolorum sequi esse,
mollitia est, culpa magni rem dicta. Quos nostrum odit adipisci facere recusandae alias ea quia voluptates soluta quibusdam modi placeat animi minus doloribus quam provident unde explicabo, officia dolores architecto praesentium obcaecati. Mollitia
est cum nulla quo? Ullam atque fugiat unde porro, corrupti mollitia iste. Eos inventore ad consectetur, maiores dolore ipsum non! Officiis atque ea accusantium ex tempora delectus explicabo eaque amet, deserunt nobis velit, harum dolor. Vitae, alias
assumenda? Aliquam mollitia eos, dolorem alias ut deserunt temporibus, et quas est hic excepturi repellendus blanditiis quo? Corporis aspernatur laboriosam sequi? Non doloribus natus dolor tempora, tempore eaque illum quas veritatis accusantium
unde laboriosam deserunt.
</div>
</div>
</div>
<div id="parallax" class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('https://source.unsplash.com/1200x550/?nature');">
<h1 class="uk-width-1-2#m uk-text-center uk-margin-auto uk-margin-auto-vertical">Headline</h1>
</div>
<footer class="uk-background-primary">
<div class="container" uk-grid>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
</div>
</footer>

You was almost there, the problem is that you need to take into account that document.body.clientHeight is the bottom of the page and what you are looking for is the element with the class "uk-background-primary" that corresponds to your footer.
Here it is the snippet:
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.getElementsByClassName("uk-background-primary")[0].offsetTop) {
document.getElementById('side-content').style.display='none';
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<div class="uk-container">
<div class="uk-text-center" uk-grid>
<div class="uk-width-1-4">
<div class="uk-panel uk-text-center" id="side-content" style="z-index: 980;" uk-sticky="bottom: #offset">
<div class="uk-card uk-card-primary uk-card-body">
<h3 class="uk-card-title">Primary</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="uk-width-3-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ipsam at unde placeat et nulla maxime maiores, repudiandae, perspiciatis ipsum ea error tenetur temporibus voluptatibus illo atque eaque eius autem aliquam! Saepe ipsam corrupti culpa
earum placeat, aliquam esse ad ducimus harum beatae facere delectus minima minus perspiciatis totam laboriosam sint quaerat reprehenderit illum hic quam et eius. Veritatis praesentium officia modi, alias quos, iste voluptate quisquam quasi, labore
sunt consectetur at inventore consequatur esse recusandae ipsam veniam dignissimos. Id explicabo nihil magnam vel dolorum cumque minus recusandae officiis illo architecto, dolor voluptates placeat aut ex quasi quos aliquid qui quisquam odit, nisi.
Asperiores eveniet recusandae, natus ipsum placeat similique ad. Dolorum quia, hic optio odio illo ut sit quibusdam distinctio maxime fugiat.</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad tempora quia similique, error iusto repudiandae explicabo neque doloribus eos dolorum eum perspiciatis. Maxime vero dolore facilis perferendis aspernatur fuga sit, quisquam a vel sunt impedit minus eos consequatur maiores quibusdam repellat qui! Praesentium labore enim eveniet dolores soluta! Accusamus recusandae sequi neque fugit, error corporis! Similique error, maiores quae facere voluptas reprehenderit excepturi eaque, eveniet ea quas odit labore? Eius aliquid ab tenetur nemo debitis nulla expedita inventore totam eos. Ullam totam eligendi inventore dolorem praesentium explicabo unde architecto laboriosam qui voluptate. Hic cum dicta dolor non aperiam, voluptatem, error deserunt velit eligendi tempora eos! Recusandae, tempore! Pariatur laudantium eaque molestiae soluta dolore nam porro, alias, quis similique accusantium accusamus voluptas dicta, cupiditate blanditiis. Quisquam doloribus voluptates, reiciendis excepturi animi saepe autem fugiat impedit rem eius deserunt dolorem porro architecto fuga officia sint explicabo, similique quam omnis molestias dolore quibusdam temporibus incidunt iure! Illo, distinctio blanditiis. Debitis animi qui dignissimos deserunt a ab dicta adipisci veniam quas, explicabo voluptatem possimus asperiores. Nihil vero rerum sapiente incidunt, libero laudantium nisi numquam, ullam dolore optio unde molestias error labore est! Nemo, repudiandae maxime aperiam vel sed itaque voluptatum. A nobis obcaecati, accusamus ad aliquid nulla harum? Nobis consequuntur reprehenderit accusantium illum et suscipit officia ipsam saepe, adipisci laboriosam fugit cumque dolorem fuga vitae est quisquam amet tenetur facilis vel eius. Doloribus est officia aperiam. Modi sed voluptates ullam accusantium accusamus quas velit, cum aspernatur at quia illo? Tempore corporis maxime eligendi ullam sapiente temporibus, excepturi incidunt ipsam. Velit necessitatibus optio saepe dicta fugit deserunt in fuga, nesciunt, accusamus repellat, eos voluptatem? Deserunt necessitatibus iste autem, eos quas explicabo voluptas facilis blanditiis est! Quasi veniam ut ab minima voluptatibus vitae sint maxime at? Nemo animi ab enim nisi eveniet, distinctio minus saepe iure a amet quod laudantium architecto laboriosam vero eum tempora fugit aut doloribus quisquam quaerat accusamus facilis minima officiis culpa! Nesciunt pariatur sequi hic, debitis enim harum molestias reiciendis eaque mollitia laboriosam ipsa officiis voluptates, labore asperiores blanditiis ducimus, autem quasi sunt. Impedit, temporibus molestiae obcaecati minima vel cumque accusantium blanditiis eligendi rem explicabo qui corporis quia! Possimus dolorum quaerat asperiores ad eaque odit labore ipsam, numquam voluptate accusamus, vitae praesentium alias autem delectus eius natus earum adipisci assumenda aliquid. Velit similique deleniti facere suscipit odio commodi quidem, nesciunt dignissimos quam odit quos dolorum sequi esse, mollitia est, culpa magni rem dicta. Quos nostrum odit adipisci facere recusandae alias ea quia voluptates soluta quibusdam modi placeat animi minus doloribus quam provident unde explicabo, officia dolores architecto praesentium obcaecati. Mollitia est cum nulla quo? Ullam atque fugiat unde porro, corrupti mollitia iste. Eos inventore ad consectetur, maiores dolore ipsum non! Officiis atque ea accusantium ex tempora delectus explicabo eaque amet, deserunt nobis velit, harum dolor. Vitae, alias assumenda? Aliquam mollitia eos, dolorem alias ut deserunt temporibus, et quas est hic excepturi repellendus blanditiis quo? Corporis aspernatur laboriosam sequi? Non doloribus natus dolor tempora, tempore eaque illum quas veritatis accusantium unde laboriosam deserunt.
</div>
</div>
</div>
<div class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('https://source.unsplash.com/1200x550/?nature');">
<h1 class="uk-width-1-2#m uk-text-center uk-margin-auto uk-margin-auto-vertical">Headline</h1>
</div>
<footer class="uk-background-primary">
<div class="container" uk-grid>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>
</div>
</footer>

Related

How do I prevent the navbar from overlapping the main contents when the navbar reappears from autohide?

At the top of the page, the body receives top-padding height from the JS script, which prevents the navbar from overlapping the main contents. However, when the navbar reappears during scroll up, the navbar overlaps the main contents again.
How do I prevent the navbar from overlapping the content when the navbar reappears from autohide during scroll up?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no, user-scalable=no">
<title>Home</title>
<link rel="icon" type="image/x-icon" href="/favicon/smiling_face_with_sunglasses.ico">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
.autohide {
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
z-index: 1030;
}
.scrolled-down {
transform: translateY(-100%);
transition: all 0.4s ease-in-out;
}
.scrolled-up {
transform: translateY(0);
transition: all 0.4s ease-in-out;
}
.cm-shadow {
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.main-sidebar {
border-right: 1px solid #c9c9c9;
}
section.min-ht {
min-height: 100vh;
}
footer {
border-top: 1px solid #c9c9c9;
font-size: 0.7rem;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
el_autohide = document.querySelector('.autohide');
// add padding-top to bady (if necessary)
navbar_height = document.querySelector('.navbar').offsetHeight;
document.body.style.paddingTop = navbar_height + 'px';
if (el_autohide) {
var last_scroll_top = 0;
window.addEventListener('scroll', function() {
let scroll_top = window.scrollY;
if (scroll_top < last_scroll_top) {
el_autohide.classList.remove('scrolled-down');
el_autohide.classList.add('scrolled-up');
} else {
el_autohide.classList.remove('scrolled-up');
el_autohide.classList.add('scrolled-down');
}
last_scroll_top = scroll_top;
});
// window.addEventListener
}
// if
});
// DOMContentLoaded end
</script>
</head>
<body>
<nav class="navbar autohide navbar-expand-lg bg-white cm-shadow">
<div class="container-lg">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu-toggle" aria-controls="main-menu-toggle" aria-expanded="false"><span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse" id="main-menu-toggle">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">About Me</a></li>
<li class="nav-item"><a class="nav-link" href="#">Personal Blog</a></li>
</ul>
</div>
</div>
<!-- container-lg -->
</nav>
<main>
<div class="container-lg">
<div class="row">
<div class="main-sidebar col-3 py-4">
<!-- <input type="search" class="form-control" placeholder="Search..." autocomplete="off"> -->
<!-- TODO Properly install MDBootstrap -->
<!-- TODO Make a TOC scrollspy -->
<!-- https://stackoverflow.com/questions/64155840/scrollspy-navbar-in-bootstrap-5 -->
<!-- https://stackoverflow.com/questions/61690907/bootstrap-scroll-spy-with-sticky-navbar-not-working-as-expected -->
<div id="scrollspy1" class="sticky-top">
<ul class="nav flex-column nav-pills menu-sidebar">
<li class="nav-item"><a class="nav-link" href="#early-life">Early Life</a></li>
<li class="nav-item"><a class="nav-link" href="#military">Military</a></li>
<li class="nav-item"><a class="nav-link" href="#education">Education</a></li>
<li class="nav-item"><a class="nav-link" href="#hobbies">Hobbies</a></li>
<li class="nav-item"><a class="nav-link" href="#career">Career</a></li>
</ul>
</div>
</div>
<div class="main-content col-9 p-4" data-bs-spy="scroll" data-bs-target="#scrollspy1" data-bs-offset="0">
<section id="early-life" class="min-ht">
<h3>Early Life</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam repellendus quaerat distinctio, minus ipsum, nulla similique sit eligendi facere cupiditate tenetur expedita tempora optio id necessitatibus aperiam, asperiores hic ipsam! Quae
voluptates nobis consectetur quibusdam quas enim fugiat eum natus ducimus blanditiis. Sequi aut laboriosam rerum illo? Laboriosam ex illo dolorem accusantium similique. Iusto, porro quibusdam dignissimos minus perspiciatis, quam inventore
magni fuga doloribus aspernatur quasi. Beatae corporis deserunt molestias assumenda ipsam alias modi dolorum magnam voluptate illum architecto, doloribus quo voluptatem libero tenetur earum omnis blanditiis provident quasi accusamus et perspiciatis
deleniti. Voluptatem maxime explicabo facere inventore magnam tempora dicta molestiae totam adipisci, aliquid et quo, similique eaque natus quidem nisi harum consequuntur quaerat est, reprehenderit a quos quisquam asperiores. Dicta dolore
eaque veniam nulla, magni cumque eum. Similique porro ab accusamus earum impedit quisquam minus nesciunt tenetur, explicabo unde in, placeat asperiores possimus saepe itaque temporibus? Error similique adipisci velit, necessitatibus aspernatur
eligendi dolor, iure nisi quia provident porro possimus quaerat dolores, minus aperiam. Deleniti, eveniet! Rerum corporis excepturi hic odio libero perferendis voluptas repellat maiores nihil itaque omnis corrupti sapiente nulla eos nemo
aut, praesentium ratione ad esse, iste quis, similique officiis rem pariatur. Nam assumenda labore cupiditate enim pariatur iure distinctio ipsum quae modi. Explicabo cum, temporibus iure in nisi consequuntur voluptas necessitatibus, dolores
magni dicta laudantium voluptatem quod officia adipisci recusandae, facere autem id sequi? Ipsam minima incidunt, voluptas nobis deleniti quis mollitia consequuntur dolorem sapiente facere, sit saepe laborum quos est quo magni vel velit
fugit quia? Veniam iste ullam fuga saepe. Velit ipsam libero maiores reiciendis. Modi animi architecto quas deserunt reprehenderit magni consequuntur, ipsam a mollitia rem? Quidem illum nulla amet consectetur deserunt voluptatum libero ullam,
temporibus aspernatur similique eius non ducimus expedita atque dolore, consequatur cumque. Animi totam qui dignissimos laborum earum similique. Cum voluptas excepturi voluptate dolorem odio est accusantium magni, distinctio, animi praesentium
illum unde, iure placeat minima a quae. Veniam explicabo aspernatur dolor eaque unde possimus, consequuntur porro. Quaerat magnam, consequatur accusantium aliquam repellat adipisci excepturi tempore laudantium quos, perspiciatis officia
asperiores? Inventore libero corporis vitae porro deleniti! Quidem saepe provident illum sed, culpa aspernatur laborum distinctio, sequi quos nihil quibusdam dolor nulla maiores vel cupiditate minima. Voluptatibus, dolore ullam, doloribus
quasi ea temporibus vel omnis nisi aspernatur corporis a illo incidunt eveniet consectetur natus sint illum eos deleniti! Aperiam minus accusantium cumque dolore est quidem quo nihil maiores quos alias perspiciatis dolor ipsum doloribus
culpa assumenda totam nostrum, laboriosam sunt ex eum ipsam distinctio aspernatur. Ipsa vero, hic et eveniet illum, iusto aliquid voluptatibus voluptatum sapiente, natus nihil id quidem facere asperiores minus nulla nisi repellat tempora
maiores cum velit eius? Doloremque nulla distinctio et quos quae, repellendus sequi reprehenderit quam. Vitae veniam explicabo ab rem modi voluptatibus soluta! Nisi ratione tempora id obcaecati excepturi illum commodi alias molestias provident
dolor similique neque illo quas in consectetur harum, laborum perferendis sequi ea perspiciatis recusandae culpa enim ex tempore. Earum necessitatibus cumque quam dolor voluptate ullam odio possimus!</p>
</section>
<section id="military" class="min-ht">
<h3>Military</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quaerat, rerum obcaecati, veritatis ratione distinctio officiis consectetur vero consequatur saepe dicta quidem possimus quis at similique impedit eum nostrum maxime, id necessitatibus
harum commodi quam cupiditate molestias? Exercitationem maiores fuga ipsa magni, architecto velit vero repudiandae saepe rerum consequatur recusandae? Officiis, totam perferendis nostrum dolore beatae illo officia esse vero qui omnis fuga
est vitae nisi fugit amet eveniet numquam, magni facilis eum deserunt enim quidem? Aspernatur, animi. Ipsum aperiam obcaecati pariatur. Ipsum ex repellat, corporis deserunt consequuntur cupiditate voluptas veritatis dolore sed sapiente animi
beatae enim illo dicta quos praesentium vero! Accusamus dolor vero adipisci dignissimos libero nulla nam possimus unde ea quidem sint nemo, molestiae, delectus, alias quae vel? Dolore magni aspernatur quas ipsa dolor, dicta aliquid deleniti
cum? Voluptas quasi id, molestias consequatur nobis, illum corrupti fugit, est dolores iste a labore sequi! Quae quod enim consectetur. Doloribus nihil animi beatae ut distinctio nisi unde vel. Voluptas deleniti dignissimos, est nostrum
tempore corrupti excepturi non, sint eum iusto quos, sequi cumque omnis facilis et iure fugiat id libero totam. Inventore minus id dolorum iste vero? Ducimus at voluptates quas consectetur! Quasi, consequatur ea! Facere eos libero quae quam
atque eum ipsam ab excepturi cum qui. Nesciunt quo molestiae praesentium harum, sapiente laborum ut eius fugit dolorem deserunt ex, quae quidem laboriosam at doloribus, impedit placeat assumenda. Ratione dicta quae tempora sapiente inventore
ullam repellendus, doloremque doloribus debitis nemo. Aperiam, quam, fuga animi explicabo quae laborum accusamus quo error nemo dolor similique id! Nulla hic vel quos impedit delectus sint obcaecati, asperiores repellat eum recusandae necessitatibus
dolores. Tempora corporis est veniam deserunt reiciendis. Voluptate incidunt ipsum consequatur maiores accusantium eum aspernatur error molestias asperiores facilis voluptatum obcaecati eius dicta saepe, ullam minima provident natus, molestiae
dolorum temporibus repellat ipsa pariatur architecto. Non, quidem nemo sed fugit illum deleniti aperiam similique voluptates quibusdam sint saepe sequi libero pariatur obcaecati earum quos magni harum dicta consequuntur maxime, quod, debitis
ea veritatis tempore. Ipsam nisi consectetur harum debitis. Beatae repellendus enim nihil incidunt dolore. Nulla consequuntur alias velit repellat beatae neque ratione facilis veniam dicta dignissimos, quis voluptatibus, assumenda nobis
facere! Neque et vel eum voluptatibus doloribus veritatis provident voluptatum numquam ullam obcaecati deserunt dolorem aut, impedit enim exercitationem atque. Nihil repellendus ratione eaque adipisci sequi eius accusantium alias quidem?
Maiores, sapiente libero. Ad, libero pariatur reprehenderit ea assumenda sint optio qui tenetur, soluta id maxime magnam minus voluptates excepturi obcaecati, distinctio labore. Modi ut, minus nemo architecto, sapiente error, recusandae
at consectetur quisquam nobis accusantium vitae. Facere aspernatur ea dolores? Sed rem minima numquam facere iure sint sequi at fugit alias magni, suscipit quam ut cupiditate quidem in. Numquam, officia in voluptates tenetur, eveniet delectus
facilis maiores a vero illum at dolorum, quia minus nihil quos quasi. Praesentium voluptatum maiores ipsa architecto aliquam consequatur. Iusto iste delectus quae molestiae itaque, eos sequi cupiditate harum, atque provident deleniti veritatis
accusamus quam fuga minus quo, voluptates accusantium sint nam voluptate. Veniam, asperiores.</p>
</section>
<section id="education" class="min-ht">
<h3>Education</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit nemo veritatis aut odio incidunt repellat praesentium labore inventore voluptas distinctio. Suscipit, animi. Optio dolor ipsa mollitia. Minima inventore quod perferendis blanditiis
eum atque eligendi ducimus sint labore, assumenda nam saepe, consequatur repellat maxime placeat. Harum reprehenderit magni alias quis accusantium suscipit excepturi fugit eius! Amet perferendis, hic deleniti, est voluptates neque praesentium
id aut placeat, qui necessitatibus? Officiis est libero at reiciendis ullam placeat distinctio, officia eum, molestias eveniet fuga sint repudiandae. Id, quo? Saepe beatae dolorum necessitatibus sequi quisquam quas dicta perspiciatis culpa
similique, impedit, id vitae blanditiis porro vel consequuntur? A accusamus rerum necessitatibus commodi ipsam consectetur culpa ut perspiciatis harum porro excepturi iste aliquid, sit molestias reprehenderit iure recusandae ea labore dolor
dolorum beatae at non, illo numquam. Tempora unde consectetur optio suscipit ea aliquam, iste perspiciatis quod vero! Rerum, adipisci. Cumque eum architecto sed cupiditate ducimus natus ullam tempora id illum, asperiores quam ratione veritatis
repellendus animi neque quidem esse, dicta sunt nisi, itaque molestias aspernatur! Vitae repellendus assumenda id est veritatis, aspernatur veniam ut magnam reiciendis, nihil eum! Quam eligendi voluptatibus omnis aspernatur atque, voluptas
molestiae inventore magni quae, cupiditate, porro error et ullam vel doloremque commodi vitae ipsum minima officiis quisquam! Nihil, optio ullam. Distinctio, quisquam eum ex expedita ducimus vel at dignissimos nihil, incidunt quidem in laborum
provident laboriosam odit consectetur aperiam obcaecati architecto explicabo eaque iure temporibus. Asperiores amet debitis ut quaerat sapiente. Est quidem a ut eveniet doloribus, beatae velit, officia perferendis architecto eligendi assumenda
ipsa hic quasi temporibus officiis quo laboriosam dolore eaque nisi exercitationem! Vel necessitatibus rem laborum tempore ipsum? Voluptatum explicabo vero nam libero deleniti fuga, rerum, pariatur nesciunt, accusamus quos voluptates assumenda
tenetur veritatis at illum aperiam quas maiores a asperiores? Odio, error debitis? Ipsum maiores itaque ex officiis ab nesciunt a quos sint in harum vel quas tenetur, eius earum, aliquam, magni laborum labore accusamus ipsa voluptatibus
iste tempora? Distinctio omnis corporis, cumque quasi voluptas tempora unde adipisci harum molestias iusto placeat, esse, eaque vero repellat dicta incidunt temporibus similique? Unde voluptas reprehenderit delectus vel eaque molestias fugiat
nobis ratione? Saepe, unde eveniet eum non fugit eaque quia minus hic provident nemo deleniti! Incidunt laudantium sint dolore? Enim sint illum ducimus suscipit doloremque unde deleniti omnis nesciunt, laborum sed eos possimus porro dolorem,
ut illo, reprehenderit impedit! Necessitatibus eaque quia earum voluptates eos, voluptatum exercitationem totam temporibus corrupti atque sequi dolores mollitia aperiam officiis incidunt, itaque facere fugiat ut praesentium perspiciatis
porro qui aspernatur iusto error. Ex doloremque repellat quaerat, nemo incidunt laborum ullam odio, accusamus facilis tempora non sunt sequi illum! Quibusdam animi quisquam ratione. Quaerat error animi atque assumenda at eveniet eum cumque
porro, soluta velit repudiandae eligendi non odio cupiditate? Alias, at quam? Magnam, et vel a repudiandae quo cupiditate, harum eaque voluptate omnis aut fugiat architecto nihil reprehenderit placeat dolorem natus mollitia consequuntur
quis doloremque doloribus assumenda soluta eveniet provident. Ducimus at provident eaque nemo illum illo ipsam ea numquam quam unde?</p>
</section>
<section id="hobbies" class="min-ht">
<h3>Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, omnis, architecto, autem voluptates ratione commodi fugit quae veniam excepturi necessitatibus deserunt cupiditate perferendis soluta voluptas doloribus. Ullam excepturi, dolores
fugit animi voluptates esse nobis perspiciatis pariatur iure deserunt officia libero inventore non qui accusamus aperiam ut quae repudiandae consectetur veritatis molestias praesentium iste explicabo obcaecati! Porro eaque quibusdam odio
itaque nesciunt beatae harum? Inventore reiciendis eos deserunt soluta consequuntur beatae tempore veniam esse fugiat! Molestiae facere, consectetur distinctio blanditiis rerum similique labore harum illum cumque quisquam a eius voluptate
rem amet odio nostrum. Magni repudiandae vero ut corporis unde cupiditate facere explicabo modi perspiciatis minima necessitatibus quo, delectus maxime. Nisi sed vitae velit dolorem unde sapiente ipsum veniam dolore maiores neque nostrum
adipisci non, quisquam, at fuga porro aut aspernatur dolores architecto enim natus assumenda. Vel ut, vitae possimus alias facilis nobis consequuntur pariatur perferendis blanditiis officia corporis nulla. Laboriosam rerum sequi aut, voluptates
maiores soluta officia minus pariatur voluptatem? Delectus repellendus nam vitae qui praesentium recusandae eveniet, iusto labore voluptatum fugit. Dolorum voluptatum exercitationem, unde ab voluptate deleniti architecto distinctio rerum
ipsa alias saepe quos cupiditate esse sapiente dignissimos suscipit impedit totam aliquid earum libero. Veniam odio alias minus mollitia sit libero, perferendis, perspiciatis maxime adipisci enim, similique quas. Ut ipsa consequuntur adipisci
consectetur doloribus necessitatibus, exercitationem minima ullam temporibus at labore beatae incidunt nostrum error. Ipsum delectus, fugit incidunt labore quisquam eaque provident debitis magnam ex praesentium quia vero expedita atque necessitatibus
mollitia, est placeat enim in esse eius vitae saepe dolore ad. Consectetur fugiat beatae, hic expedita rem velit delectus? Ad deserunt quasi quas eaque blanditiis dolore vel qui, repellat, doloremque error nesciunt laborum exercitationem
vero beatae dolores officiis quo facilis iure. Totam ipsum ipsam ex ut beatae sed aliquam deleniti laudantium fuga, pariatur culpa delectus dicta voluptatum at id impedit alias rem? Sapiente eos incidunt temporibus labore quo quidem suscipit
molestias porro. Sint repellendus aspernatur ipsa cupiditate quae, voluptatem beatae eaque rerum impedit rem possimus eveniet facilis suscipit nobis voluptatum dicta ea autem sequi doloremque quaerat laborum? Et quo debitis hic, atque quos
ratione ab aut nam deleniti laborum ullam ipsam, quam velit eum aspernatur, dolorum porro praesentium unde natus. Ducimus, optio adipisci facere quidem dignissimos voluptatem sit porro ad aut voluptatibus asperiores debitis iusto unde eius
aliquam a ab, nisi error sunt fugiat voluptatum aliquid. Nisi nemo vero optio quia repellendus sed, veritatis voluptas, quam iste ab rerum cum hic, tempora voluptate esse! Necessitatibus, error commodi dicta a illo quo incidunt nobis tempore
provident quod ut sit doloremque fugit voluptatum optio voluptates placeat laudantium possimus? Voluptatem numquam odit dignissimos quibusdam fugit qui optio dolor fugiat totam tenetur dolorem quae ea, ipsam modi autem rerum facere. Dolores
ipsum tempora ad asperiores, aliquam dolorum sed. Tempore fugit laborum sit, vero dicta ut in hic voluptatibus ex quod magni nemo quia quis iusto assumenda dolorem. Dolorum debitis impedit voluptates neque aliquam, nulla sit magni alias
obcaecati culpa sequi reiciendis beatae id omnis deleniti nemo architecto quae dolorem totam.</p>
</section>
<section id="career">
<h3>Career</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, omnis, architecto, autem voluptates ratione commodi fugit quae veniam excepturi necessitatibus deserunt cupiditate perferendis soluta voluptas doloribus. Ullam excepturi, dolores
fugit animi voluptates esse nobis perspiciatis pariatur iure deserunt officia libero inventore non qui accusamus aperiam ut quae repudiandae consectetur veritatis molestias praesentium iste explicabo obcaecati! Porro eaque quibusdam odio
itaque nesciunt beatae harum? Inventore reiciendis eos deserunt soluta consequuntur beatae tempore veniam esse fugiat! Molestiae facere, consectetur distinctio blanditiis rerum similique labore harum illum cumque quisquam a eius voluptate
rem amet odio nostrum. Magni repudiandae vero ut corporis unde cupiditate facere explicabo modi perspiciatis minima necessitatibus quo, delectus maxime. Nisi sed vitae velit dolorem unde sapiente ipsum veniam dolore maiores neque nostrum
adipisci non, quisquam, at fuga porro aut aspernatur dolores architecto enim natus assumenda. Vel ut, vitae possimus alias facilis nobis consequuntur pariatur perferendis blanditiis officia corporis nulla. Laboriosam rerum sequi aut, voluptates
maiores soluta officia minus pariatur voluptatem? Delectus repellendus nam vitae qui praesentium recusandae eveniet, iusto labore voluptatum fugit. Dolorum voluptatum exercitationem, unde ab voluptate deleniti architecto distinctio rerum
ipsa alias saepe quos cupiditate esse sapiente dignissimos suscipit impedit totam aliquid earum libero. Veniam odio alias minus mollitia sit libero, perferendis, perspiciatis maxime adipisci enim, similique quas. Ut ipsa consequuntur adipisci
consectetur doloribus necessitatibus, exercitationem minima ullam temporibus at labore beatae incidunt nostrum error. Ipsum delectus, fugit incidunt labore quisquam eaque provident debitis magnam ex praesentium quia vero expedita atque necessitatibus
mollitia, est placeat enim in esse eius vitae saepe dolore ad. Consectetur fugiat beatae, hic expedita rem velit delectus? Ad deserunt quasi quas eaque blanditiis dolore vel qui, repellat, doloremque error nesciunt laborum exercitationem
vero beatae dolores officiis quo facilis iure. Totam ipsum ipsam ex ut beatae sed aliquam deleniti laudantium fuga, pariatur culpa delectus dicta voluptatum at id impedit alias rem? Sapiente eos incidunt temporibus labore quo quidem suscipit
molestias porro. Sint repellendus aspernatur ipsa cupiditate quae, voluptatem beatae eaque rerum impedit rem possimus eveniet facilis suscipit nobis voluptatum dicta ea autem sequi doloremque quaerat laborum? Et quo debitis hic, atque quos
ratione ab aut nam deleniti laborum ullam ipsam, quam velit eum aspernatur, dolorum porro praesentium unde natus. Ducimus, optio adipisci facere quidem dignissimos voluptatem sit porro ad aut voluptatibus asperiores debitis iusto unde eius
aliquam a ab, nisi error sunt fugiat voluptatum aliquid. Nisi nemo vero optio quia repellendus sed, veritatis voluptas, quam iste ab rerum cum hic, tempora voluptate esse! Necessitatibus, error commodi dicta a illo quo incidunt nobis tempore
provident quod ut sit doloremque fugit voluptatum optio voluptates placeat laudantium possimus? Voluptatem numquam odit dignissimos quibusdam fugit qui optio dolor fugiat totam tenetur dolorem quae ea, ipsam modi autem rerum facere. Dolores
ipsum tempora ad asperiores, aliquam dolorum sed. Tempore fugit laborum sit, vero dicta ut in hic voluptatibus ex quod magni nemo quia quis iusto assumenda dolorem. Dolorum debitis impedit voluptates neque aliquam, nulla sit magni alias
obcaecati culpa sequi reiciendis beatae id omnis deleniti nemo architecto quae dolorem totam.</p>
<p>Link to PDF resume doc</p>
<p>Link to LinkedIn account</p>
</section>
</div>
</div>
</div>
<!-- container-lg -->
</main>
<footer>
<div class="container-lg pt-3">
<p>© Copyright 2022 Joe Smith. All Rights Reserved.</p>
</div>
<!-- container-lg -->
</footer>
</body>
</html>

If you make the navbar position sticky instead of fixed it will take the space as if the body had padding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no, user-scalable=no">
<title>Home</title>
<link rel="icon" type="image/x-icon" href="/favicon/smiling_face_with_sunglasses.ico">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
.autohide {
position: sticky;
top: 0;
right: 0;
left: 0;
width: 100%;
z-index: 1030;
}
.scrolled-down {
transform: translateY(-100%);
transition: all 0.4s ease-in-out;
}
.scrolled-up {
transform: translateY(0);
transition: all 0.4s ease-in-out;
}
.cm-shadow {
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.main-sidebar {
border-right: 1px solid #c9c9c9;
}
section.min-ht {
min-height: 100vh;
}
footer {
border-top: 1px solid #c9c9c9;
font-size: 0.7rem;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
el_autohide = document.querySelector('.autohide');
if (el_autohide) {
var last_scroll_top = 0;
window.addEventListener('scroll', function() {
let scroll_top = window.scrollY;
if (scroll_top < last_scroll_top) {
el_autohide.classList.remove('scrolled-down');
el_autohide.classList.add('scrolled-up');
} else {
el_autohide.classList.remove('scrolled-up');
el_autohide.classList.add('scrolled-down');
}
last_scroll_top = scroll_top;
});
// window.addEventListener
}
// if
});
// DOMContentLoaded end
</script>
</head>
<body>
<nav class="navbar autohide navbar-expand-lg bg-white cm-shadow">
<div class="container-lg">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu-toggle" aria-controls="main-menu-toggle" aria-expanded="false"><span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse" id="main-menu-toggle">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">About Me</a></li>
<li class="nav-item"><a class="nav-link" href="#">Personal Blog</a></li>
</ul>
</div>
</div>
<!-- container-lg -->
</nav>
<main>
<div class="container-lg">
<div class="row">
<div class="main-sidebar col-3 py-4">
<!-- <input type="search" class="form-control" placeholder="Search..." autocomplete="off"> -->
<!-- TODO Properly install MDBootstrap -->
<!-- TODO Make a TOC scrollspy -->
<!-- https://stackoverflow.com/questions/64155840/scrollspy-navbar-in-bootstrap-5 -->
<!-- https://stackoverflow.com/questions/61690907/bootstrap-scroll-spy-with-sticky-navbar-not-working-as-expected -->
<div id="scrollspy1" class="sticky-top">
<ul class="nav flex-column nav-pills menu-sidebar">
<li class="nav-item"><a class="nav-link" href="#early-life">Early Life</a></li>
<li class="nav-item"><a class="nav-link" href="#military">Military</a></li>
<li class="nav-item"><a class="nav-link" href="#education">Education</a></li>
<li class="nav-item"><a class="nav-link" href="#hobbies">Hobbies</a></li>
<li class="nav-item"><a class="nav-link" href="#career">Career</a></li>
</ul>
</div>
</div>
<div class="main-content col-9 p-4" data-bs-spy="scroll" data-bs-target="#scrollspy1" data-bs-offset="0">
<section id="early-life" class="min-ht">
<h3>Early Life</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam repellendus quaerat distinctio, minus ipsum, nulla similique sit eligendi facere cupiditate tenetur expedita tempora optio id necessitatibus aperiam, asperiores hic ipsam! Quae
voluptates nobis consectetur quibusdam quas enim fugiat eum natus ducimus blanditiis. Sequi aut laboriosam rerum illo? Laboriosam ex illo dolorem accusantium similique. Iusto, porro quibusdam dignissimos minus perspiciatis, quam inventore
magni fuga doloribus aspernatur quasi. Beatae corporis deserunt molestias assumenda ipsam alias modi dolorum magnam voluptate illum architecto, doloribus quo voluptatem libero tenetur earum omnis blanditiis provident quasi accusamus et perspiciatis
deleniti. Voluptatem maxime explicabo facere inventore magnam tempora dicta molestiae totam adipisci, aliquid et quo, similique eaque natus quidem nisi harum consequuntur quaerat est, reprehenderit a quos quisquam asperiores. Dicta dolore
eaque veniam nulla, magni cumque eum. Similique porro ab accusamus earum impedit quisquam minus nesciunt tenetur, explicabo unde in, placeat asperiores possimus saepe itaque temporibus? Error similique adipisci velit, necessitatibus aspernatur
eligendi dolor, iure nisi quia provident porro possimus quaerat dolores, minus aperiam. Deleniti, eveniet! Rerum corporis excepturi hic odio libero perferendis voluptas repellat maiores nihil itaque omnis corrupti sapiente nulla eos nemo
aut, praesentium ratione ad esse, iste quis, similique officiis rem pariatur. Nam assumenda labore cupiditate enim pariatur iure distinctio ipsum quae modi. Explicabo cum, temporibus iure in nisi consequuntur voluptas necessitatibus, dolores
magni dicta laudantium voluptatem quod officia adipisci recusandae, facere autem id sequi? Ipsam minima incidunt, voluptas nobis deleniti quis mollitia consequuntur dolorem sapiente facere, sit saepe laborum quos est quo magni vel velit
fugit quia? Veniam iste ullam fuga saepe. Velit ipsam libero maiores reiciendis. Modi animi architecto quas deserunt reprehenderit magni consequuntur, ipsam a mollitia rem? Quidem illum nulla amet consectetur deserunt voluptatum libero ullam,
temporibus aspernatur similique eius non ducimus expedita atque dolore, consequatur cumque. Animi totam qui dignissimos laborum earum similique. Cum voluptas excepturi voluptate dolorem odio est accusantium magni, distinctio, animi praesentium
illum unde, iure placeat minima a quae. Veniam explicabo aspernatur dolor eaque unde possimus, consequuntur porro. Quaerat magnam, consequatur accusantium aliquam repellat adipisci excepturi tempore laudantium quos, perspiciatis officia
asperiores? Inventore libero corporis vitae porro deleniti! Quidem saepe provident illum sed, culpa aspernatur laborum distinctio, sequi quos nihil quibusdam dolor nulla maiores vel cupiditate minima. Voluptatibus, dolore ullam, doloribus
quasi ea temporibus vel omnis nisi aspernatur corporis a illo incidunt eveniet consectetur natus sint illum eos deleniti! Aperiam minus accusantium cumque dolore est quidem quo nihil maiores quos alias perspiciatis dolor ipsum doloribus
culpa assumenda totam nostrum, laboriosam sunt ex eum ipsam distinctio aspernatur. Ipsa vero, hic et eveniet illum, iusto aliquid voluptatibus voluptatum sapiente, natus nihil id quidem facere asperiores minus nulla nisi repellat tempora
maiores cum velit eius? Doloremque nulla distinctio et quos quae, repellendus sequi reprehenderit quam. Vitae veniam explicabo ab rem modi voluptatibus soluta! Nisi ratione tempora id obcaecati excepturi illum commodi alias molestias provident
dolor similique neque illo quas in consectetur harum, laborum perferendis sequi ea perspiciatis recusandae culpa enim ex tempore. Earum necessitatibus cumque quam dolor voluptate ullam odio possimus!</p>
</section>
<section id="military" class="min-ht">
<h3>Military</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quaerat, rerum obcaecati, veritatis ratione distinctio officiis consectetur vero consequatur saepe dicta quidem possimus quis at similique impedit eum nostrum maxime, id necessitatibus
harum commodi quam cupiditate molestias? Exercitationem maiores fuga ipsa magni, architecto velit vero repudiandae saepe rerum consequatur recusandae? Officiis, totam perferendis nostrum dolore beatae illo officia esse vero qui omnis fuga
est vitae nisi fugit amet eveniet numquam, magni facilis eum deserunt enim quidem? Aspernatur, animi. Ipsum aperiam obcaecati pariatur. Ipsum ex repellat, corporis deserunt consequuntur cupiditate voluptas veritatis dolore sed sapiente animi
beatae enim illo dicta quos praesentium vero! Accusamus dolor vero adipisci dignissimos libero nulla nam possimus unde ea quidem sint nemo, molestiae, delectus, alias quae vel? Dolore magni aspernatur quas ipsa dolor, dicta aliquid deleniti
cum? Voluptas quasi id, molestias consequatur nobis, illum corrupti fugit, est dolores iste a labore sequi! Quae quod enim consectetur. Doloribus nihil animi beatae ut distinctio nisi unde vel. Voluptas deleniti dignissimos, est nostrum
tempore corrupti excepturi non, sint eum iusto quos, sequi cumque omnis facilis et iure fugiat id libero totam. Inventore minus id dolorum iste vero? Ducimus at voluptates quas consectetur! Quasi, consequatur ea! Facere eos libero quae quam
atque eum ipsam ab excepturi cum qui. Nesciunt quo molestiae praesentium harum, sapiente laborum ut eius fugit dolorem deserunt ex, quae quidem laboriosam at doloribus, impedit placeat assumenda. Ratione dicta quae tempora sapiente inventore
ullam repellendus, doloremque doloribus debitis nemo. Aperiam, quam, fuga animi explicabo quae laborum accusamus quo error nemo dolor similique id! Nulla hic vel quos impedit delectus sint obcaecati, asperiores repellat eum recusandae necessitatibus
dolores. Tempora corporis est veniam deserunt reiciendis. Voluptate incidunt ipsum consequatur maiores accusantium eum aspernatur error molestias asperiores facilis voluptatum obcaecati eius dicta saepe, ullam minima provident natus, molestiae
dolorum temporibus repellat ipsa pariatur architecto. Non, quidem nemo sed fugit illum deleniti aperiam similique voluptates quibusdam sint saepe sequi libero pariatur obcaecati earum quos magni harum dicta consequuntur maxime, quod, debitis
ea veritatis tempore. Ipsam nisi consectetur harum debitis. Beatae repellendus enim nihil incidunt dolore. Nulla consequuntur alias velit repellat beatae neque ratione facilis veniam dicta dignissimos, quis voluptatibus, assumenda nobis
facere! Neque et vel eum voluptatibus doloribus veritatis provident voluptatum numquam ullam obcaecati deserunt dolorem aut, impedit enim exercitationem atque. Nihil repellendus ratione eaque adipisci sequi eius accusantium alias quidem?
Maiores, sapiente libero. Ad, libero pariatur reprehenderit ea assumenda sint optio qui tenetur, soluta id maxime magnam minus voluptates excepturi obcaecati, distinctio labore. Modi ut, minus nemo architecto, sapiente error, recusandae
at consectetur quisquam nobis accusantium vitae. Facere aspernatur ea dolores? Sed rem minima numquam facere iure sint sequi at fugit alias magni, suscipit quam ut cupiditate quidem in. Numquam, officia in voluptates tenetur, eveniet delectus
facilis maiores a vero illum at dolorum, quia minus nihil quos quasi. Praesentium voluptatum maiores ipsa architecto aliquam consequatur. Iusto iste delectus quae molestiae itaque, eos sequi cupiditate harum, atque provident deleniti veritatis
accusamus quam fuga minus quo, voluptates accusantium sint nam voluptate. Veniam, asperiores.</p>
</section>
<section id="education" class="min-ht">
<h3>Education</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit nemo veritatis aut odio incidunt repellat praesentium labore inventore voluptas distinctio. Suscipit, animi. Optio dolor ipsa mollitia. Minima inventore quod perferendis blanditiis
eum atque eligendi ducimus sint labore, assumenda nam saepe, consequatur repellat maxime placeat. Harum reprehenderit magni alias quis accusantium suscipit excepturi fugit eius! Amet perferendis, hic deleniti, est voluptates neque praesentium
id aut placeat, qui necessitatibus? Officiis est libero at reiciendis ullam placeat distinctio, officia eum, molestias eveniet fuga sint repudiandae. Id, quo? Saepe beatae dolorum necessitatibus sequi quisquam quas dicta perspiciatis culpa
similique, impedit, id vitae blanditiis porro vel consequuntur? A accusamus rerum necessitatibus commodi ipsam consectetur culpa ut perspiciatis harum porro excepturi iste aliquid, sit molestias reprehenderit iure recusandae ea labore dolor
dolorum beatae at non, illo numquam. Tempora unde consectetur optio suscipit ea aliquam, iste perspiciatis quod vero! Rerum, adipisci. Cumque eum architecto sed cupiditate ducimus natus ullam tempora id illum, asperiores quam ratione veritatis
repellendus animi neque quidem esse, dicta sunt nisi, itaque molestias aspernatur! Vitae repellendus assumenda id est veritatis, aspernatur veniam ut magnam reiciendis, nihil eum! Quam eligendi voluptatibus omnis aspernatur atque, voluptas
molestiae inventore magni quae, cupiditate, porro error et ullam vel doloremque commodi vitae ipsum minima officiis quisquam! Nihil, optio ullam. Distinctio, quisquam eum ex expedita ducimus vel at dignissimos nihil, incidunt quidem in laborum
provident laboriosam odit consectetur aperiam obcaecati architecto explicabo eaque iure temporibus. Asperiores amet debitis ut quaerat sapiente. Est quidem a ut eveniet doloribus, beatae velit, officia perferendis architecto eligendi assumenda
ipsa hic quasi temporibus officiis quo laboriosam dolore eaque nisi exercitationem! Vel necessitatibus rem laborum tempore ipsum? Voluptatum explicabo vero nam libero deleniti fuga, rerum, pariatur nesciunt, accusamus quos voluptates assumenda
tenetur veritatis at illum aperiam quas maiores a asperiores? Odio, error debitis? Ipsum maiores itaque ex officiis ab nesciunt a quos sint in harum vel quas tenetur, eius earum, aliquam, magni laborum labore accusamus ipsa voluptatibus
iste tempora? Distinctio omnis corporis, cumque quasi voluptas tempora unde adipisci harum molestias iusto placeat, esse, eaque vero repellat dicta incidunt temporibus similique? Unde voluptas reprehenderit delectus vel eaque molestias fugiat
nobis ratione? Saepe, unde eveniet eum non fugit eaque quia minus hic provident nemo deleniti! Incidunt laudantium sint dolore? Enim sint illum ducimus suscipit doloremque unde deleniti omnis nesciunt, laborum sed eos possimus porro dolorem,
ut illo, reprehenderit impedit! Necessitatibus eaque quia earum voluptates eos, voluptatum exercitationem totam temporibus corrupti atque sequi dolores mollitia aperiam officiis incidunt, itaque facere fugiat ut praesentium perspiciatis
porro qui aspernatur iusto error. Ex doloremque repellat quaerat, nemo incidunt laborum ullam odio, accusamus facilis tempora non sunt sequi illum! Quibusdam animi quisquam ratione. Quaerat error animi atque assumenda at eveniet eum cumque
porro, soluta velit repudiandae eligendi non odio cupiditate? Alias, at quam? Magnam, et vel a repudiandae quo cupiditate, harum eaque voluptate omnis aut fugiat architecto nihil reprehenderit placeat dolorem natus mollitia consequuntur
quis doloremque doloribus assumenda soluta eveniet provident. Ducimus at provident eaque nemo illum illo ipsam ea numquam quam unde?</p>
</section>
<section id="hobbies" class="min-ht">
<h3>Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, omnis, architecto, autem voluptates ratione commodi fugit quae veniam excepturi necessitatibus deserunt cupiditate perferendis soluta voluptas doloribus. Ullam excepturi, dolores
fugit animi voluptates esse nobis perspiciatis pariatur iure deserunt officia libero inventore non qui accusamus aperiam ut quae repudiandae consectetur veritatis molestias praesentium iste explicabo obcaecati! Porro eaque quibusdam odio
itaque nesciunt beatae harum? Inventore reiciendis eos deserunt soluta consequuntur beatae tempore veniam esse fugiat! Molestiae facere, consectetur distinctio blanditiis rerum similique labore harum illum cumque quisquam a eius voluptate
rem amet odio nostrum. Magni repudiandae vero ut corporis unde cupiditate facere explicabo modi perspiciatis minima necessitatibus quo, delectus maxime. Nisi sed vitae velit dolorem unde sapiente ipsum veniam dolore maiores neque nostrum
adipisci non, quisquam, at fuga porro aut aspernatur dolores architecto enim natus assumenda. Vel ut, vitae possimus alias facilis nobis consequuntur pariatur perferendis blanditiis officia corporis nulla. Laboriosam rerum sequi aut, voluptates
maiores soluta officia minus pariatur voluptatem? Delectus repellendus nam vitae qui praesentium recusandae eveniet, iusto labore voluptatum fugit. Dolorum voluptatum exercitationem, unde ab voluptate deleniti architecto distinctio rerum
ipsa alias saepe quos cupiditate esse sapiente dignissimos suscipit impedit totam aliquid earum libero. Veniam odio alias minus mollitia sit libero, perferendis, perspiciatis maxime adipisci enim, similique quas. Ut ipsa consequuntur adipisci
consectetur doloribus necessitatibus, exercitationem minima ullam temporibus at labore beatae incidunt nostrum error. Ipsum delectus, fugit incidunt labore quisquam eaque provident debitis magnam ex praesentium quia vero expedita atque necessitatibus
mollitia, est placeat enim in esse eius vitae saepe dolore ad. Consectetur fugiat beatae, hic expedita rem velit delectus? Ad deserunt quasi quas eaque blanditiis dolore vel qui, repellat, doloremque error nesciunt laborum exercitationem
vero beatae dolores officiis quo facilis iure. Totam ipsum ipsam ex ut beatae sed aliquam deleniti laudantium fuga, pariatur culpa delectus dicta voluptatum at id impedit alias rem? Sapiente eos incidunt temporibus labore quo quidem suscipit
molestias porro. Sint repellendus aspernatur ipsa cupiditate quae, voluptatem beatae eaque rerum impedit rem possimus eveniet facilis suscipit nobis voluptatum dicta ea autem sequi doloremque quaerat laborum? Et quo debitis hic, atque quos
ratione ab aut nam deleniti laborum ullam ipsam, quam velit eum aspernatur, dolorum porro praesentium unde natus. Ducimus, optio adipisci facere quidem dignissimos voluptatem sit porro ad aut voluptatibus asperiores debitis iusto unde eius
aliquam a ab, nisi error sunt fugiat voluptatum aliquid. Nisi nemo vero optio quia repellendus sed, veritatis voluptas, quam iste ab rerum cum hic, tempora voluptate esse! Necessitatibus, error commodi dicta a illo quo incidunt nobis tempore
provident quod ut sit doloremque fugit voluptatum optio voluptates placeat laudantium possimus? Voluptatem numquam odit dignissimos quibusdam fugit qui optio dolor fugiat totam tenetur dolorem quae ea, ipsam modi autem rerum facere. Dolores
ipsum tempora ad asperiores, aliquam dolorum sed. Tempore fugit laborum sit, vero dicta ut in hic voluptatibus ex quod magni nemo quia quis iusto assumenda dolorem. Dolorum debitis impedit voluptates neque aliquam, nulla sit magni alias
obcaecati culpa sequi reiciendis beatae id omnis deleniti nemo architecto quae dolorem totam.</p>
</section>
<section id="career">
<h3>Career</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, omnis, architecto, autem voluptates ratione commodi fugit quae veniam excepturi necessitatibus deserunt cupiditate perferendis soluta voluptas doloribus. Ullam excepturi, dolores
fugit animi voluptates esse nobis perspiciatis pariatur iure deserunt officia libero inventore non qui accusamus aperiam ut quae repudiandae consectetur veritatis molestias praesentium iste explicabo obcaecati! Porro eaque quibusdam odio
itaque nesciunt beatae harum? Inventore reiciendis eos deserunt soluta consequuntur beatae tempore veniam esse fugiat! Molestiae facere, consectetur distinctio blanditiis rerum similique labore harum illum cumque quisquam a eius voluptate
rem amet odio nostrum. Magni repudiandae vero ut corporis unde cupiditate facere explicabo modi perspiciatis minima necessitatibus quo, delectus maxime. Nisi sed vitae velit dolorem unde sapiente ipsum veniam dolore maiores neque nostrum
adipisci non, quisquam, at fuga porro aut aspernatur dolores architecto enim natus assumenda. Vel ut, vitae possimus alias facilis nobis consequuntur pariatur perferendis blanditiis officia corporis nulla. Laboriosam rerum sequi aut, voluptates
maiores soluta officia minus pariatur voluptatem? Delectus repellendus nam vitae qui praesentium recusandae eveniet, iusto labore voluptatum fugit. Dolorum voluptatum exercitationem, unde ab voluptate deleniti architecto distinctio rerum
ipsa alias saepe quos cupiditate esse sapiente dignissimos suscipit impedit totam aliquid earum libero. Veniam odio alias minus mollitia sit libero, perferendis, perspiciatis maxime adipisci enim, similique quas. Ut ipsa consequuntur adipisci
consectetur doloribus necessitatibus, exercitationem minima ullam temporibus at labore beatae incidunt nostrum error. Ipsum delectus, fugit incidunt labore quisquam eaque provident debitis magnam ex praesentium quia vero expedita atque necessitatibus
mollitia, est placeat enim in esse eius vitae saepe dolore ad. Consectetur fugiat beatae, hic expedita rem velit delectus? Ad deserunt quasi quas eaque blanditiis dolore vel qui, repellat, doloremque error nesciunt laborum exercitationem
vero beatae dolores officiis quo facilis iure. Totam ipsum ipsam ex ut beatae sed aliquam deleniti laudantium fuga, pariatur culpa delectus dicta voluptatum at id impedit alias rem? Sapiente eos incidunt temporibus labore quo quidem suscipit
molestias porro. Sint repellendus aspernatur ipsa cupiditate quae, voluptatem beatae eaque rerum impedit rem possimus eveniet facilis suscipit nobis voluptatum dicta ea autem sequi doloremque quaerat laborum? Et quo debitis hic, atque quos
ratione ab aut nam deleniti laborum ullam ipsam, quam velit eum aspernatur, dolorum porro praesentium unde natus. Ducimus, optio adipisci facere quidem dignissimos voluptatem sit porro ad aut voluptatibus asperiores debitis iusto unde eius
aliquam a ab, nisi error sunt fugiat voluptatum aliquid. Nisi nemo vero optio quia repellendus sed, veritatis voluptas, quam iste ab rerum cum hic, tempora voluptate esse! Necessitatibus, error commodi dicta a illo quo incidunt nobis tempore
provident quod ut sit doloremque fugit voluptatum optio voluptates placeat laudantium possimus? Voluptatem numquam odit dignissimos quibusdam fugit qui optio dolor fugiat totam tenetur dolorem quae ea, ipsam modi autem rerum facere. Dolores
ipsum tempora ad asperiores, aliquam dolorum sed. Tempore fugit laborum sit, vero dicta ut in hic voluptatibus ex quod magni nemo quia quis iusto assumenda dolorem. Dolorum debitis impedit voluptates neque aliquam, nulla sit magni alias
obcaecati culpa sequi reiciendis beatae id omnis deleniti nemo architecto quae dolorem totam.</p>
<p>Link to PDF resume doc</p>
<p>Link to LinkedIn account</p>
</section>
</div>
</div>
</div>
<!-- container-lg -->
</main>
<footer>
<div class="container-lg pt-3">
<p>© Copyright 2022 Joe Smith. All Rights Reserved.</p>
</div>
<!-- container-lg -->
</footer>
</body>
</html>

It overlaps because you've set the padding of the main container and that's scrolled out of view.
I've tweaked your code to make the sidebar position fixed then set the left margin of the main-content to make sure it doesn't overlap the sidebar (you might want to make this a bit more responsive). I've then set the main-sidebar top: to a css variable that I set in the element style so that when the navbar reappears it pushes it back down in to view. Have a look and see what you think.
Edited: Forgot to set the --top css variable on load which made the first run of the animation a bit janky.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no, user-scalable=no">
<title>Home</title>
<link rel="icon" type="image/x-icon" href="/favicon/smiling_face_with_sunglasses.ico">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
.autohide {
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
z-index: 1030;
}
.scrolled-down {
transform: translateY(-100%);
transition: all 0.4s ease-in-out;
}
.scrolled-up {
transform: translateY(0);
transition: all 0.4s ease-in-out;
}
.cm-shadow {
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.main-sidebar {
border-right: 1px solid #c9c9c9;
position: fixed;
top: var(--top);
width: 200px;
transition: top 0.5s;
}
.main-content {
margin-left: 280px;
}
section.min-ht {
min-height: 100vh;
}
footer {
border-top: 1px solid #c9c9c9;
font-size: 0.7rem;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
el_autohide = document.querySelector('.autohide');
const main_sidebar = document.getElementById('mainSidebar');
// add padding-top to bady (if necessary)
navbar_height = document.querySelector('.navbar').offsetHeight;
document.body.style.paddingTop = navbar_height + 'px';
main_sidebar.style.cssText = "--top:" + navbar_height + "px";
if (el_autohide) {
var last_scroll_top = 0;
window.addEventListener('scroll', function() {
let scroll_top = window.scrollY;
if (scroll_top < last_scroll_top) {
el_autohide.classList.remove('scrolled-down');
el_autohide.classList.add('scrolled-up');
main_sidebar.style.cssText = "--top:" + navbar_height + "px";
} else {
el_autohide.classList.remove('scrolled-up');
el_autohide.classList.add('scrolled-down');
main_sidebar.style.cssText = "--top:0;";
}
last_scroll_top = scroll_top;
});
// window.addEventListener
}
// if
});
// DOMContentLoaded end
</script>
</head>
<body>
<nav class="navbar autohide navbar-expand-lg bg-white cm-shadow">
<div class="container-lg">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu-toggle" aria-controls="main-menu-toggle" aria-expanded="false"><span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse" id="main-menu-toggle">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">About Me</a></li>
<li class="nav-item"><a class="nav-link" href="#">Personal Blog</a></li>
</ul>
</div>
</div>
<!-- container-lg -->
</nav>
<main>
<div class="container-lg">
<div class="row">
<div class="main-sidebar col-3 py-4" id='mainSidebar'>
<!-- <input type="search" class="form-control" placeholder="Search..." autocomplete="off"> -->
<!-- TODO Properly install MDBootstrap -->
<!-- TODO Make a TOC scrollspy -->
<!-- https://stackoverflow.com/questions/64155840/scrollspy-navbar-in-bootstrap-5 -->
<!-- https://stackoverflow.com/questions/61690907/bootstrap-scroll-spy-with-sticky-navbar-not-working-as-expected -->
<div id="scrollspy1" class="sticky-top">
<ul class="nav flex-column nav-pills menu-sidebar">
<li class="nav-item"><a class="nav-link" href="#early-life">Early Life</a></li>
<li class="nav-item"><a class="nav-link" href="#military">Military</a></li>
<li class="nav-item"><a class="nav-link" href="#education">Education</a></li>
<li class="nav-item"><a class="nav-link" href="#hobbies">Hobbies</a></li>
<li class="nav-item"><a class="nav-link" href="#career">Career</a></li>
</ul>
</div>
</div>
<div class="main-content col-9 p-4" data-bs-spy="scroll" data-bs-target="#scrollspy1" data-bs-offset="0">
<section id="early-life" class="min-ht">
<h3>Early Life</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam repellendus quaerat distinctio, minus ipsum, nulla similique sit eligendi facere cupiditate tenetur expedita tempora optio id necessitatibus aperiam, asperiores hic ipsam! Quae
voluptates nobis consectetur quibusdam quas enim fugiat eum natus ducimus blanditiis. Sequi aut laboriosam rerum illo? Laboriosam ex illo dolorem accusantium similique. Iusto, porro quibusdam dignissimos minus perspiciatis, quam inventore
magni fuga doloribus aspernatur quasi. Beatae corporis deserunt molestias assumenda ipsam alias modi culpa enim ex tempore. Earum necessitatibus cumque quam dolor voluptate ullam odio possimus!</p>
</section>
<section id="military" class="min-ht">
<h3>Military</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quaerat, rerum obcaecati, veritatis ratione distinctio officiis consectetur vero consequatur saepe dicta quidem possimus quis at similique impedit eum nostrum maxime, id necessitatibus
harum commodi quam cupiditate molestias? Exercitationem maiores fuga ipsa magni, architecto velit vero repudiandae saepe rerum consequatur recusandae? Officiis, totam perferendis nostrum dolore beatae illo officia esse vero qui omnis fuga
ium voluptatum maiores ipsa architecto aliquam consequatur. Iusto iste delectus quae molestiae itaque, eos sequi cupiditate harum, atque provident deleniti veritatis accusamus quam fuga minus quo, voluptates accusantium sint nam voluptate.
Veniam, asperiores.</p>
</section>
<section id="education" class="min-ht">
<h3>Education</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit nemo veritatis aut odio incidunt repellat praesentium labore inventore voluptas distinctio. Suscipit, animi. Optio dolor ipsa mollitia. Minima inventore quod perferendis blanditiis
eum atque eligendi ducimus sint labore, assumenda nam saepe, consequatur repellat maxime placeat. Harum reprehenderit magni alias quis accusantium suscipit excepturi fugit eius! Amet perferendis, hic deleniti, est voluptates neque praesentium
id aut placeat, qui necessitatibus? Officiis est libero at reiciendis ullam placeat distinctio, officia eum, molestias eveniet fuga sint repudiandae. Id, quo? Saepe beatae dolorum necessitatibus sequi quisquam quas dicta perspiciatis culpa
lias, at quam? Magnam, et vel a repudiandae quo cupiditate, harum eaque voluptate omnis aut fugiat architecto nihil reprehenderit placeat dolorem natus mollitia consequuntur quis doloremque doloribus assumenda soluta eveniet provident. Ducimus
at provident eaque nemo illum illo ipsam ea numquam quam unde?</p>
</section>
<section id="hobbies" class="min-ht">
<h3>Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, omnis, architecto, autem voluptates ratione commodi fugit quae veniam excepturi necessitatibus deserunt cupiditate perferendis soluta voluptas doloribus. Ullam excepturi, dolores
fugit animi voluptates esse nobis perspiciatis pariatur iure deserunt officia libero inventore non qui accusamus aperiam ut quae repudiandae consectetur veritatis molestias praesentium iste explicabo obcaecati! Porro eaque quibusdam odio
itaque nesciunt beatae harum? Inventore reiciendis eos deserunt soluta consequuntur beatae tempore veniam esse fugiat! Molestiae facere, consectetur distinctio blanditiis rerum similique labore harum illum cumque quisquam a eius voluptate
um debitis impedit voluptates neque aliquam, nulla sit magni alias obcaecati culpa sequi reiciendis beatae id omnis deleniti nemo architecto quae dolorem totam.</p>
</section>
<section id="career">
<h3>Career</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, omnis, architecto, autem voluptates ratione commodi fugit quae veniam excepturi necessitatibus deserunt cupiditate perferendis soluta voluptas doloribus. Ullam excepturi, dolores
fugit animi voluptates esse nobis perspiciatis pariatur iure deserunt officia libero inventore non qui accusamus aperiam ut quae repudiandae consectetur veritatis molestias praesentium iste explicabo obcaecati! Porro eaque quibusdam odio</p>
<p>Link to PDF resume doc</p>
<p>Link to LinkedIn account</p>
</section>
</div>
</div>
</div>
<!-- container-lg -->
</main>
<footer>
<div class="container-lg pt-3">
<p>© Copyright 2022 Joe Smith. All Rights Reserved.</p>
</div>
<!-- container-lg -->
</footer>
</body>
</html>

Why does jQuery click to scroll not add the appropriate active class?

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>

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>

Positioning containers to fixed from relative [duplicate]

This question already has answers here:
Fixed position element inside div container only
(2 answers)
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 2 years ago.
Following is the code where I want the panel-right to be at the fix position similar to position: relative but the problem is when I change position: relative to position: fixed it moves to the right side and left container takes full width of the panel-container whereas I want the same layout as in position: relative but as soon as I scroll the page only panel-right will fixed at its position and UI though remains the same.
Code -
* { box-sizing: border-box; }
body { background: #c3c3c3; }
.green { color: green; }
.blue { color: blue; }
.teal { color: teal; }
.red { color: red; }
.panel-container {
max-width: 400px;
margin: 0 auto;
outline: 1px solid #000;
display: flex;
align-items: flex-start;
}
.panel-right {
border: 1px solid green;
/* position: fixed; */
position: relative;
right: 0;
}
<div class="container">
<div class="page-title">
<h3 class="title">This is my Page Heading</h3>
</div>
<hr />
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod at maiores perspiciatis libero, assumenda ab ipsum numquam quasi earum! Explicabo perspiciatis, qui rerum dicta eaque error voluptates, tenetur obcaecati nisi necessitatibus, rem ducimus sit, alias cupiditate. Laboriosam sit rerum, dolorum quaerat quibusdam, tempore explicabo fugiat aliquid possimus optio iure totam.
</p>
</div>
<hr />
<div class="panel-container">
<div class="panel-left">
<p class="green">
<h3>LEFT CONTAINER</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id, ad est nobis! Expedita aperiam aliquid assumenda placeat blanditiis, error pariatur, amet praesentium nam beatae culpa iusto deleniti, voluptas, nisi?10
</p>
<p class="blue">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In molestiae odit suscipit, tempore nulla voluptatem molestias eos dolorum fuga cupiditate reiciendis veniam, tempora odio esse debitis earum. Fugiat dignissimos perspiciatis sint? In at nemo, eligendi veritatis porro error, corrupti, doloribus consectetur quisquam ipsum officiis officia doloremque pariatur ex laboriosam temporibus quo incidunt beatae suscipit autem! Officiis, sequi necessitatibus quaerat unde quae nesciunt reprehenderit, porro cumque recusandae repudiandae enim a laboriosam.
<p class="teal">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta nostrum, omnis quidem a quia voluptatem nisi totam enim quasi aliquam eligendi deleniti minima amet officia nemo porro fugit cumque magni nobis sunt voluptatum officiis molestiae facere incidunt! Delectus, dolores totam dolor et debitis assumenda quae quia reprehenderit distinctio aut minima, neque quisquam enim velit aspernatur quibusdam molestiae doloremque iusto. Quae maxime quos aliquid voluptatibus distinctio laboriosam veritatis unde delectus accusantium pariatur veniam facilis hic culpa tempora, at, autem, ex sed inventore nemo omnis saepe. Impedit quaerat necessitatibus, delectus voluptas consectetur! Repellat at autem, eos, fuga impedit exercitationem, id earum perspiciatis vel, odit iure aut ipsa! Et, dolorum quas odit deleniti libero quo magnam. Ad nihil porro, animi, eum commodi labore suscipit consequuntur inventore quas neque eligendi. Omnis obcaecati iure amet quasi unde, pariatur animi nam sequi, necessitatibus aspernatur mollitia facere debitis repellat odit fugiat, atque! Rem optio vero officiis consequatur repellendus illum quas numquam, mollitia beatae magni sunt explicabo fugit molestiae inventore architecto. Sunt harum obcaecati dolorum ut incidunt alias pariatur vel atque quod, deserunt laudantium illo maxime, illum consequatur quasi, perferendis debitis nobis rem sint ex id voluptas magni dicta voluptates. Pariatur earum, tempore eos deleniti esse, eaque ducimus?
</p>
<p class="red">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In deserunt ex rem, ea dicta distinctio doloribus. Accusantium, inventore placeat quis possimus nesciunt molestiae iusto voluptate, excepturi. Eaque necessitatibus fuga, aperiam ab sunt. Error nesciunt quia ipsam laudantium incidunt. Nulla dignissimos distinctio assumenda sunt quas hic magnam veritatis aliquam ipsa repudiandae, eveniet dolore, labore? Iusto enim, aut temporibus quaerat, quidem amet? Saepe impedit, dolores vero nostrum est eveniet officia cum. Porro sunt, magnam, ea possimus quidem ipsum, assumenda dolores similique eius veritatis tempore exercitationem! Porro, asperiores, perferendis. Porro doloremque autem ullam tenetur repudiandae facilis nulla non ea id tempore hic natus impedit accusamus vero tempora modi minus saepe consequatur nihil, amet enim necessitatibus, iste atque! Ipsam earum delectus modi, maxime autem unde voluptatum officiis? Ratione, odio illo corporis sequi minus esse. Cumque quasi recusandae assumenda beatae delectus mollitia quam praesentium nisi voluptas totam deserunt doloremque aspernatur a quod, tempora ut qui esse cupiditate, eos quas voluptatum. Et porro laboriosam unde suscipit expedita sed mollitia repudiandae, esse dicta nisi consectetur harum quidem quaerat optio, sequi commodi placeat cum earum? Illum modi, non quisquam quam repellat nisi magnam fuga soluta ab vero perspiciatis debitis officia rem quas tempora sapiente quia libero illo repellendus! Debitis nihil obcaecati quidem id, praesentium ad iste ipsam quia, optio iusto ab illo dolorum perspiciatis quaerat vel, consequuntur cum accusamus possimus sint! Aut eaque, necessitatibus unde vel, cumque temporibus inventore? Cumque sunt eum, maxime blanditiis ratione accusamus nemo nulla fugit tempore in suscipit delectus eveniet. Consectetur, optio error molestias similique quisquam accusamus autem at consequuntur, quo repudiandae commodi a. Sit quae, consequatur, quia cumque porro ducimus cum sint eveniet quidem! Autem a consectetur nulla repudiandae aperiam, adipisci fugiat perspiciatis rerum tenetur rem. A dolores cumque exercitationem nihil iusto fugit numquam repellendus, dolore inventore ratione illo quidem culpa, quo, dolorem.
</p>
</div>
<div class="panel-right">
<ul>
<li>RIGHT CONTAINER</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div>
dscdsfs

* { box-sizing: border-box; }
body { background: #c3c3c3; }
.green { color: green; }
.blue { color: blue; }
.teal { color: teal; }
.red { color: red; }
.panel-container {
max-width: 400px;
margin: 0 auto;
outline: 1px solid #000;
display: flex;
align-items: flex-start;
}
.panel-right {
border: 1px solid green;
/* position: fixed; */
position: sticky; /* new stuff */
top: 0; /* new stuff */
right: 0;
}
<div class="container">
<div class="page-title">
<h3 class="title">This is my Page Heading</h3>
</div>
<hr />
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod at maiores perspiciatis libero, assumenda ab ipsum numquam quasi earum! Explicabo perspiciatis, qui rerum dicta eaque error voluptates, tenetur obcaecati nisi necessitatibus, rem ducimus sit, alias cupiditate. Laboriosam sit rerum, dolorum quaerat quibusdam, tempore explicabo fugiat aliquid possimus optio iure totam.
</p>
</div>
<hr />
<div class="panel-container">
<div class="panel-left">
<p class="green">
<h3>LEFT CONTAINER</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id, ad est nobis! Expedita aperiam aliquid assumenda placeat blanditiis, error pariatur, amet praesentium nam beatae culpa iusto deleniti, voluptas, nisi?10
</p>
<p class="blue">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In molestiae odit suscipit, tempore nulla voluptatem molestias eos dolorum fuga cupiditate reiciendis veniam, tempora odio esse debitis earum. Fugiat dignissimos perspiciatis sint? In at nemo, eligendi veritatis porro error, corrupti, doloribus consectetur quisquam ipsum officiis officia doloremque pariatur ex laboriosam temporibus quo incidunt beatae suscipit autem! Officiis, sequi necessitatibus quaerat unde quae nesciunt reprehenderit, porro cumque recusandae repudiandae enim a laboriosam.
<p class="teal">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta nostrum, omnis quidem a quia voluptatem nisi totam enim quasi aliquam eligendi deleniti minima amet officia nemo porro fugit cumque magni nobis sunt voluptatum officiis molestiae facere incidunt! Delectus, dolores totam dolor et debitis assumenda quae quia reprehenderit distinctio aut minima, neque quisquam enim velit aspernatur quibusdam molestiae doloremque iusto. Quae maxime quos aliquid voluptatibus distinctio laboriosam veritatis unde delectus accusantium pariatur veniam facilis hic culpa tempora, at, autem, ex sed inventore nemo omnis saepe. Impedit quaerat necessitatibus, delectus voluptas consectetur! Repellat at autem, eos, fuga impedit exercitationem, id earum perspiciatis vel, odit iure aut ipsa! Et, dolorum quas odit deleniti libero quo magnam. Ad nihil porro, animi, eum commodi labore suscipit consequuntur inventore quas neque eligendi. Omnis obcaecati iure amet quasi unde, pariatur animi nam sequi, necessitatibus aspernatur mollitia facere debitis repellat odit fugiat, atque! Rem optio vero officiis consequatur repellendus illum quas numquam, mollitia beatae magni sunt explicabo fugit molestiae inventore architecto. Sunt harum obcaecati dolorum ut incidunt alias pariatur vel atque quod, deserunt laudantium illo maxime, illum consequatur quasi, perferendis debitis nobis rem sint ex id voluptas magni dicta voluptates. Pariatur earum, tempore eos deleniti esse, eaque ducimus?
</p>
<p class="red">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In deserunt ex rem, ea dicta distinctio doloribus. Accusantium, inventore placeat quis possimus nesciunt molestiae iusto voluptate, excepturi. Eaque necessitatibus fuga, aperiam ab sunt. Error nesciunt quia ipsam laudantium incidunt. Nulla dignissimos distinctio assumenda sunt quas hic magnam veritatis aliquam ipsa repudiandae, eveniet dolore, labore? Iusto enim, aut temporibus quaerat, quidem amet? Saepe impedit, dolores vero nostrum est eveniet officia cum. Porro sunt, magnam, ea possimus quidem ipsum, assumenda dolores similique eius veritatis tempore exercitationem! Porro, asperiores, perferendis. Porro doloremque autem ullam tenetur repudiandae facilis nulla non ea id tempore hic natus impedit accusamus vero tempora modi minus saepe consequatur nihil, amet enim necessitatibus, iste atque! Ipsam earum delectus modi, maxime autem unde voluptatum officiis? Ratione, odio illo corporis sequi minus esse. Cumque quasi recusandae assumenda beatae delectus mollitia quam praesentium nisi voluptas totam deserunt doloremque aspernatur a quod, tempora ut qui esse cupiditate, eos quas voluptatum. Et porro laboriosam unde suscipit expedita sed mollitia repudiandae, esse dicta nisi consectetur harum quidem quaerat optio, sequi commodi placeat cum earum? Illum modi, non quisquam quam repellat nisi magnam fuga soluta ab vero perspiciatis debitis officia rem quas tempora sapiente quia libero illo repellendus! Debitis nihil obcaecati quidem id, praesentium ad iste ipsam quia, optio iusto ab illo dolorum perspiciatis quaerat vel, consequuntur cum accusamus possimus sint! Aut eaque, necessitatibus unde vel, cumque temporibus inventore? Cumque sunt eum, maxime blanditiis ratione accusamus nemo nulla fugit tempore in suscipit delectus eveniet. Consectetur, optio error molestias similique quisquam accusamus autem at consequuntur, quo repudiandae commodi a. Sit quae, consequatur, quia cumque porro ducimus cum sint eveniet quidem! Autem a consectetur nulla repudiandae aperiam, adipisci fugiat perspiciatis rerum tenetur rem. A dolores cumque exercitationem nihil iusto fugit numquam repellendus, dolore inventore ratione illo quidem culpa, quo, dolorem.
</p>
</div>
<div class="panel-right">
<ul>
<li>RIGHT CONTAINER</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div>

Add class on scroll on bootstrap 4 nav

Hi I need to add a class on the bootstrap navbar on scroll.
So when it scroll pass the height of the navbar, it will change from transparent color to a different color. This different color will be set on the class.
Here's what I have so far (which doesn't seem to work):
The script
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll >= 56) {
$(".bg-desar").addClass("bg-white");
} else {
$(".bg-desar").removeClass("bg-transparent");
}
});
//# sourceURL=pen.js
</script>
The bootstrap nav:
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-desar">
<div class="container">
<div class="navi-left">
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</div>
<div class="navi-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarCollapse',
'menu_class' => 'navbar-nav',
'fallback_cb' => '',
'menu_id' => 'main-menu',
) );
?>
</div>
</div>
</nav><!-- #site-navigation -->
I got the code here on stackoverflow, but when I use it it doesn't work.
Please let me know what I should do. T
Thank you.
Edit:
Now here is what I have done
<script>
$(window).load(function(){
var scroll = $(window).scrollTop();
if(scroll >= 56) {
$(".bg-desar").addClass("bg-white");
} else {
$(".bg-desar").removeClass("bg-white");
}
});
</script>
So .bg-desar is a transparent background, .bg-desar.bg-white will be white.
Am I correct? And where should I put the script? between the or ?

jQuery(function($) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll >= 56) {
$(".bg-desar").addClass("bg-white");
} else {
$(".bg-desar").removeClass("bg-transparent");
}
});
}

I made this demo based on yours, you can check this for more detail:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 50) {
$(".navbar").removeClass("bg-transparent").addClass("bg-white");
} else {
$(".navbar").removeClass("bg-white").addClass("bg-transparent");
}
});
.navbar {
color: #fff;
transition: all 0.3s ease;
}
.bg-white {
background-color: #fff;
color: #000;
border-bottom: 1px solid #ddd;
}
.bg-image img {
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="navbar navbar-expand-lg navbar-light fixed-top bg-transparent">
<div class="container">
<div class="navi-left">
<h4>Left</h4>
</div>
<div class="navi-right">
<h4>Right</h4>
</div>
</div>
</div>
</header>
<div class="page-wrapper">
<div class="bg-image">
<img src="https://unsplash.it/1280/720" alt="bg">
</div>
<div class="container">
<p>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique asperiores vero laudantium nesciunt placeat, nihil nulla. Aperiam, laborum eos beatae non voluptates maiores quas, delectus rerum necessitatibus unde ut! Temporibus odio animi laudantium
velit nisi ipsa itaque sint maxime. Quam, accusamus perferendis consequatur reiciendis atque vitae dicta dolorum a quod unde voluptate iusto esse commodi cum eligendi! Rem, cupiditate! Molestias numquam laboriosam accusantium aut culpa hic officia
possimus voluptatum voluptate necessitatibus officiis nulla modi asperiores animi temporibus maxime dolores quam cumque perspiciatis, delectus ratione, odio natus repellat eum. Repudiandae reprehenderit eveniet optio, magni blanditiis, iusto expedita
exercitationem necessitatibus consequuntur, totam labore dolorum sed officia molestiae! Consequuntur expedita sequi, sed facere consectetur aspernatur doloremque ipsum est eius commodi amet, facilis, repellat molestias optio eligendi. Quis corporis
velit fuga temporibus facere, eaque, repellendus recusandae delectus beatae numquam aut necessitatibus in voluptate sint obcaecati quo distinctio libero, consequatur neque! Enim suscipit ea molestiae facilis eius, eos nihil nesciunt magni voluptatem
quis neque placeat deleniti commodi accusamus dignissimos corrupti repellat ullam animi quibusdam exercitationem perspiciatis. Animi veniam deleniti sunt aspernatur odit minima incidunt. Minima modi fuga optio quas non placeat esse odit excepturi
voluptate eum cumque officiis fugit ipsa, consectetur assumenda. Fugit sapiente ipsa dolores eveniet? Assumenda quas unde voluptatum impedit ipsa iure necessitatibus distinctio corrupti. Architecto quibusdam odit, ut delectus ea sit, sunt iure
voluptas dolores fugiat assumenda maxime eos saepe corrupti minima sapiente distinctio quo tenetur eligendi ab cumque facere suscipit libero consectetur. Ea repudiandae in velit ullam, excepturi odio ratione aperiam eveniet numquam est architecto
accusamus similique, neque, assumenda animi deserunt. Officia quae odio totam earum libero impedit veritatis iusto officiis quos temporibus est quod, animi amet voluptatibus illo fuga repellendus nihil deserunt nam, ducimus sint numquam alias.
Rerum perspiciatis excepturi magni aperiam illo eos quisquam non, libero quis at voluptatum veritatis, odit illum, necessitatibus eum minus earum! Dolores culpa natus animi nam qui, commodi tempore neque possimus iste repudiandae libero aut itaque
amet earum illo numquam, quisquam laborum odio, optio expedita voluptate exercitationem. Ut provident aut eligendi laborum animi id, eaque accusamus vero libero laudantium sapiente saepe, inventore corrupti a qui. Aut nulla consequuntur maxime!
Molestiae pariatur itaque earum ducimus harum? Impedit in corrupti rem aliquam hic? Voluptates explicabo quo, aliquam dolorum nisi id aut praesentium fuga neque aperiam possimus hic quis inventore obcaecati doloremque nihil molestiae corporis,
minima voluptatum fugit delectus. Voluptas, sint porro! Corrupti eos ad hic sed consequuntur error, voluptatum odio dolorem tempora, mollitia explicabo cumque magnam aliquam repudiandae unde deleniti ipsam quasi culpa commodi quod aperiam nesciunt
corporis id! Tempora, est necessitatibus voluptas beatae a quia maiores, esse omnis quos eligendi eaque minus fugit neque. Repellendus quam cum asperiores accusantium consequatur, laboriosam nulla doloribus maxime modi possimus esse tempora laudantium
reprehenderit ipsa deleniti? Eaque, voluptas deserunt odit esse inventore doloremque ex dolores ratione quia atque omnis numquam, qui soluta magnam officiis dolorum labore repellendus animi enim exercitationem aliquid culpa. Natus hic, fugiat
dolorum necessitatibus expedita debitis dolor voluptatum cupiditate ut voluptatem id quidem vero quo laudantium accusamus pariatur animi, in repellendus nobis voluptates? Sapiente rem deserunt voluptatibus quaerat corporis voluptatum, qui eligendi
rerum hic, porro ab labore cum nisi voluptas, vel explicabo magnam blanditiis at culpa. Optio itaque officia explicabo eius illo cumque, architecto dicta. Eius, perferendis aut harum accusamus, fugit quas optio, recusandae ducimus enim quaerat
molestias quidem aliquid quo ipsum ab ut minima eum quae ad eligendi doloremque fugiat repellendus. Repellendus voluptatem aspernatur placeat nostrum excepturi velit, laudantium quae tenetur accusantium ipsa officia dignissimos amet at! At labore
officiis neque consequatur alias eaque vel voluptates ad laborum minima, inventore dicta. Inventore dolore, esse tempore fugiat quisquam consequatur, optio hic adipisci minus necessitatibus doloremque quam nesciunt laboriosam accusantium pariatur
quaerat nobis deleniti reprehenderit sapiente ea! Labore sapiente sit molestiae facere vitae quod necessitatibus rerum doloremque, dolorem non, eos, omnis quasi. Consequatur asperiores ea iure aut atque ipsa ab explicabo possimus odit omnis, ullam
totam, nostrum officia esse corrupti voluptas molestiae dignissimos. Repellat soluta non voluptates architecto. Fugiat, ipsa quibusdam nam rerum architecto necessitatibus animi? Cumque, cupiditate nisi rem aliquid aut velit quaerat a doloremque
veniam vel vitae, id explicabo nobis eum ea unde ex. Harum, officia voluptatum? In, cumque ut aut, nemo amet voluptatem at voluptate aliquid laudantium dicta sequi reprehenderit? Assumenda voluptas necessitatibus saepe eveniet ex veritatis atque
voluptate doloribus vero exercitationem! Mollitia vitae, eveniet earum quis praesentium odit obcaecati, culpa id excepturi, nulla quas. Magni fuga nisi vel laudantium neque fugit voluptatibus quas porro delectus voluptatum, possimus obcaecati
rerum, ea modi cupiditate doloremque totam suscipit ipsa eum amet voluptatem alias officia nulla. Sequi impedit deleniti iusto voluptatibus nulla nostrum possimus quisquam, beatae eveniet explicabo pariatur fuga magni, excepturi culpa veniam!
Obcaecati architecto numquam nulla officia id, provident porro molestiae impedit! Porro atque, illo incidunt molestiae voluptate sint possimus perspiciatis aliquid rerum dolorum vel! Laboriosam nulla impedit, molestiae dolores asperiores quae
reprehenderit possimus molestias aperiam hic laudantium, quibusdam odit iste quis accusamus delectus. Aliquid est esse odio voluptatem minus eligendi optio hic adipisci. Sunt repudiandae ducimus, provident minus, excepturi maxime eligendi culpa
enim consequatur numquam ipsum aperiam totam, possimus sed ratione? Perspiciatis, nam excepturi eum sint quia est repellendus et modi at neque rerum omnis ipsa vitae. Sed optio itaque veritatis nobis illo. Maiores distinctio quo debitis illo hic,
incidunt animi vel, molestias deleniti assumenda fugiat laborum recusandae voluptates veritatis quae excepturi? Expedita, est! Ducimus nulla ratione ipsam voluptate, quae aliquid dolore laboriosam dicta molestiae ad reprehenderit sunt magni odio
iusto autem cumque rerum inventore numquam quisquam fuga harum corrupti? Amet at animi atque laudantium nobis et facilis eius? Impedit enim consectetur eos nostrum nesciunt repellat voluptatibus sit quam iste ut! Nobis, atque modi repudiandae
nisi tempore ratione eveniet provident fugit eum voluptates sint iure velit voluptate aspernatur! Quas possimus harum enim perspiciatis distinctio, repellat quasi quo suscipit omnis at voluptas incidunt reiciendis dolor! Temporibus ut, sint molestiae
deleniti, ex dolores placeat et tempora ipsum atque quas sapiente provident inventore accusamus. Soluta illo ad odit quidem. Consequatur, quae magnam obcaecati et dolor mollitia corrupti.</div>
</p>
</div>
</div>

3 row layout, 100% height: 1 auto, 1 auto with scroll, 1 fixed

I'm struggling to create a page layout that has: a header which will expand to match its content, a footer that has a fixed height (which will never change) and a content section that fills the distance between the two that will scroll when necessary.
The difference between this and many other 3 row questions asked on SO is that I need the header to be fluid not fixed.
Here's an example of what I am after. It works perfectly in Chrome, however 40% of the target demographic use IE7 and this doesn't work in any version of IE.
It's worth viewing it as a full page.
html,
body,
form {
height: 100%;
margin: 0;
overflow: hidden;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.table .tr {
display: table-row;
}
.table .tr.header {
background: #ccc;
}
.table .tr.content {
height: 90%;
}
.table .tr.footer {
height: 50px;
background: #ccc;
}
.table .td {
display: table-cell;
}
.innerContent {
height: 100%;
background: #f0f0f0;
overflow: auto;
}
<div class="table">
<div class="tr header">
<div class="td">
<b>Header</b>
<br />expands to show all available content
<br />Other content
<br />Some more content
<br />Even more content
<br />Additional content
<br />Extended content
<br />Enhanced content
<br />Ya ya ya
</div>
</div>
<div class="tr content">
<div class="td">
<div class="innerContent">
<b>Content</b>
<br /> Will fill the remaining space and will scroll if necessary
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</div>
<div class="tr footer">
<div class="td">
<b>Footer</b>
<br/> Has fixed height and will never change.
</div>
</div>
</div>
Quirks
I can't use FlexBox because of IE7 although I would if there was a Polyfill available (I can't find one that supports IE7)
I can use HTML Tables (but would prefer not to).
I'm happy to use a JavaScript solution as long as its airtight, meaning if the content in the header changes the height, the content height needs to update as well; in fact, the version I am working with at the moment uses the following JavaScript to set the height of the content area:
function _makeContentScrollable() {
var $template = $(".table"),
$content = $template.children(".content");
$content.height(($(window).height()) - ($content.offset().top + $footer.outerHeight(true, true)));
}
This is re-called onresize but I'm unsure of the best way of calling this when the header height changes an example would be from an expanding/collapsing element in the header, short of calling a callback function on every script that might affect the height of the header which seems like a maintenance nightmare.

You don't need anything other than positioning. Check this out, which uses:
position: fixed
padding
This would give you a layout with fixed, scrolling (auto), fixed layout.
* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
body {padding: 70px 0 50px;}
p {margin: 10px 0 0;}
p:first-child {margin: 0;}
.header, .footer {
position: fixed;
left: 0; right: 0;
top: 0;
background-color: #ccc;
padding: 5px;
max-height: 70px;
overflow: hidden;
}
.footer {
top: auto;
bottom: 0;
text-align: center;
}
.content {
position: fixed;
top: 75px; bottom: 35px;
left: 0; right: 0;
overflow: auto;
}
<div class="header">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus consequuntur tenetur amet quisquam, fuga nobis eligendi perspiciatis saepe inventore nam nihil, ducimus id soluta accusantium iusto! Modi itaque vel laudantium.</div>
<div class="content">
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iure id culpa provident autem dolor, ea sit excepturi accusamus deleniti maxime repudiandae minima expedita eligendi, quam iste ullam cumque. Nesciunt!</span>
<span>Itaque dolorem repudiandae qui repellendus error non inventore possimus cum! Praesentium nobis laboriosam illum voluptas quidem reiciendis incidunt, rem? Sapiente nemo, quam officia eveniet maiores sint. Culpa, modi eveniet vel.</span>
<span>Asperiores non, facilis ratione placeat culpa, saepe dicta obcaecati, nesciunt blanditiis iste nostrum! Rem, suscipit. Nesciunt voluptas aliquam deleniti autem vitae repudiandae, hic, similique vel. Eius omnis ex voluptatum at?</span>
<span>Enim facilis rem dolore tempore numquam iste sapiente id molestias cupiditate accusamus laborum eius consequatur magnam sequi iusto obcaecati officiis, nostrum? A eum error praesentium, in eos aperiam voluptatibus pariatur?</span>
<span>Ipsam cumque, ab sunt explicabo dolores voluptates repellat aspernatur, molestiae, corporis, impedit blanditiis minus praesentium facilis deserunt alias sequi adipisci a. Numquam explicabo, odit fugiat reprehenderit fugit dolor aliquam nulla.</span>
<span>Qui libero accusamus, eveniet quo ducimus temporibus quia consectetur nulla, dolores obcaecati fuga officiis excepturi sed error esse architecto necessitatibus assumenda aliquam at quidem quae illo! Blanditiis doloribus voluptatum, facilis.</span>
<span>Ipsa inventore beatae quibusdam praesentium sunt omnis nesciunt eos incidunt accusantium adipisci, vitae dicta, perspiciatis repellendus, laudantium quam eius consequatur minus, illum reprehenderit. Tempora culpa officiis itaque veritatis vitae rem.</span>
<span>Temporibus debitis repudiandae molestias praesentium expedita a aperiam quia veniam sequi delectus, harum atque incidunt consequatur tenetur exercitationem dolor at mollitia ea ad! Laborum, provident. Illum iste nam cumque dicta!</span>
<span>Est commodi tempore quos nisi voluptatem aperiam totam laudantium vero autem quisquam explicabo labore sapiente, ea quas tenetur doloremque pariatur iure excepturi repellendus quia harum sint, perspiciatis! Saepe asperiores, labore.</span>
<span>At quidem cum iusto pariatur dolor dolorem autem, corporis ipsum libero ipsa possimus fugiat aperiam dicta labore beatae ducimus veniam, molestiae nemo, cumque. Veniam mollitia itaque, aliquam porro hic enim!</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere perspiciatis magni iusto porro, nam quis, vel architecto rerum provident adipisci eveniet delectus deserunt, beatae dolore! Maxime quibusdam non, suscipit perspiciatis.</span>
<span>Id dolorem assumenda, minus repudiandae velit facere atque quam sunt sapiente cum? Explicabo necessitatibus ipsam pariatur? Consequuntur exercitationem, sequi porro temporibus architecto a est, similique distinctio harum dicta libero accusantium.</span>
<span>Ipsa corrupti repellat quaerat ratione sapiente unde dolor mollitia possimus at, voluptates architecto aliquid suscipit, natus porro, iusto perferendis. Optio error, aspernatur. Quaerat hic nobis soluta suscipit eveniet dignissimos, pariatur.</span>
<span>Nemo aspernatur vitae non assumenda, similique sapiente totam porro laborum iste saepe facilis, reiciendis placeat impedit natus, itaque ipsam voluptatibus fugit ratione optio, sit iusto. Delectus ipsa officia voluptatem minima.</span>
<span>Sequi vero vel cupiditate porro ipsam, voluptates ad deleniti sunt magni ex adipisci dicta error amet eveniet cum facilis perferendis nemo cumque. Eveniet similique quaerat voluptas ex velit, labore molestiae.</span>
<span>Quibusdam iusto provident, neque amet, explicabo corrupti quia tempore voluptatibus dolorem dolorum sequi ex quidem tempora reprehenderit praesentium quod dignissimos. Laudantium, praesentium consequuntur. Dolore sequi, quos. Nobis blanditiis, porro aperiam?</span>
<span>Natus eius ex ullam nam magnam, facere cupiditate facilis animi soluta maiores reprehenderit illum rem quae, sit velit mollitia excepturi at dolorum explicabo. Ducimus animi, aliquid voluptas cupiditate quos odio!</span>
<span>Quo magni nostrum, asperiores delectus numquam qui cum impedit minus laborum explicabo, ab repellat aliquid nihil rem sunt praesentium, quaerat dolore quibusdam aut? Temporibus itaque perferendis cumque reprehenderit, quis recusandae?</span>
<span>Aspernatur quod at neque quaerat quidem architecto earum facere nisi, fuga vero deserunt eaque necessitatibus officiis, tenetur iste? Expedita maxime dolorem blanditiis sed exercitationem praesentium facere, commodi amet quis nemo.</span>
<span>Dolor atque laboriosam, provident tempora. Fugit delectus quidem modi cum voluptates, vel obcaecati iure reiciendis. Sit ad, sed tempora nobis atque consequuntur dolore ducimus voluptas. Sint animi mollitia cumque id.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum dolorem libero blanditiis nobis consequuntur corporis excepturi laudantium ea explicabo facilis dolores fugit, est, voluptatum adipisci incidunt magni! Iure obcaecati, facere.</span>
<span>Ducimus quidem voluptate voluptas est fuga consequatur pariatur, accusamus, deserunt quisquam excepturi. Culpa autem quia veritatis cupiditate soluta, quisquam, corporis assumenda, minus esse odit expedita consequatur aut laboriosam incidunt dolorem.</span>
<span>Ipsa aliquam eos velit repudiandae, porro ipsum aliquid et tenetur autem minus quisquam officia deleniti ut reprehenderit commodi natus quis, ab dolor repellat nostrum nobis eaque quo. Nulla, veritatis aspernatur.</span>
<span>Odit quisquam nam, facere obcaecati neque, eligendi dicta quos esse veniam quasi dolore vitae voluptatum autem corrupti iure vero ipsum unde, iusto ipsam at optio doloremque. Cumque necessitatibus, quisquam mollitia.</span>
<span>Provident culpa inventore rerum nemo itaque reiciendis, architecto adipisci laudantium, error, quidem labore omnis cupiditate aspernatur blanditiis magnam doloribus eveniet quasi. Similique incidunt eius, placeat laudantium ipsa blanditiis error libero.</span>
<span>Illum reiciendis exercitationem, cumque corrupti quibusdam fugit sit perferendis adipisci sunt eos ut placeat sequi excepturi esse porro veritatis recusandae non iste magnam unde ea ab aliquam natus, explicabo. Sapiente.</span>
<span>Fuga velit autem, nemo facilis enim earum nam voluptas omnis adipisci laudantium dignissimos, sint ad quibusdam minima ipsa quaerat consequatur officiis repellat ut ab, eius, voluptate quos assumenda! Maiores, necessitatibus!</span>
<span>Voluptatum amet deserunt saepe est maiores laborum, in quas deleniti hic iure animi debitis cum earum, qui possimus quisquam porro doloremque, sed eaque nemo aliquam labore dicta voluptatibus? Quibusdam, animi.</span>
<span>Nam dolorem non illo alias minus quis ratione eveniet nesciunt, tempora aperiam placeat fuga iure quidem quia sed iste voluptate consequatur, ducimus assumenda maiores impedit, saepe. Fuga perspiciatis unde eum?</span>
<span>Nesciunt sapiente, fugit deserunt, repellendus velit, possimus nobis doloremque rerum magni beatae dicta eos, quaerat nam labore. Cupiditate commodi necessitatibus ipsam laudantium dolores, nihil nam totam similique, neque provident accusantium.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt asperiores recusandae corrupti quod magnam ea ratione eveniet excepturi, temporibus dolorem labore, impedit illo, debitis. Assumenda harum, consequatur obcaecati reiciendis. Aspernatur!</span>
<span>Sequi inventore blanditiis, non exercitationem saepe explicabo sapiente mollitia nam tempore enim, optio! Aliquam quam, magnam voluptates et laborum excepturi autem nostrum explicabo dolores harum vero cum fuga nesciunt, cumque.</span>
<span>Fugit, eligendi optio veniam, quo enim ipsum minus neque natus, vero eaque, consequatur corporis nesciunt quis quod mollitia sapiente recusandae suscipit doloribus possimus. Alias reprehenderit quod perferendis architecto ipsa, consequatur.</span>
<span>Nihil architecto minima, inventore, officiis itaque alias odio quibusdam amet? Minus quae aliquam, maxime. Nam pariatur aut quis, distinctio est, itaque. Blanditiis laboriosam molestiae deleniti commodi vel praesentium aperiam consequatur?</span>
<span>Qui a dolorum dicta, nihil perspiciatis reprehenderit rem esse voluptas porro, quod beatae error excepturi quam tempora, illo. Similique minus, unde fuga! Earum nesciunt maiores cumque quisquam quam iste numquam!</span>
<span>Nisi accusamus, nesciunt vel explicabo veniam laudantium sit delectus debitis id numquam mollitia accusantium itaque sed. Voluptatum, nostrum laborum illo labore veritatis, minima nesciunt repellat, a neque maiores est magnam!</span>
<span>Aspernatur ab reprehenderit doloribus ut hic deleniti eaque veritatis. Consequuntur non mollitia blanditiis vitae illo in cum rem minus a dicta optio dolorum facilis vero, at vel beatae earum. Corporis?</span>
<span>Ad quos expedita officiis odio autem! Neque non doloremque voluptatum, laudantium cupiditate voluptas voluptate earum explicabo dolores, nam nobis distinctio ad, aliquid recusandae deleniti doloribus architecto illo molestiae laboriosam odio?</span>
<span>Soluta, minima expedita, dolorem explicabo enim alias amet nam, sunt neque dolor saepe rerum dignissimos hic itaque accusamus atque provident. Ut at eum deserunt aspernatur ullam expedita tempora, exercitationem nemo.</span>
<span>Voluptatem, quae, praesentium? Maxime veritatis earum, autem quia minus quae asperiores dolor quo veniam non tenetur vero officiis beatae magnam ipsum aliquam odit rerum illum architecto provident voluptate. Architecto, aperiam.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet molestiae quibusdam officiis, sapiente maiores id cupiditate libero autem saepe magnam, quo necessitatibus dolorum iure fugiat perspiciatis praesentium tempora dolore ad.</span>
<span>Omnis et perspiciatis blanditiis nulla, non ipsam impedit dolore molestias eos nesciunt nam pariatur delectus temporibus tenetur esse, corrupti voluptatum commodi debitis! Maxime, doloribus hic reprehenderit in iusto provident optio.</span>
<span>Cupiditate amet, consequuntur neque esse architecto dolorum distinctio. Tenetur sapiente tempore possimus libero nam suscipit in commodi vitae, id eligendi cupiditate expedita facilis accusamus praesentium, a vero ipsum repellat explicabo?</span>
<span>Vero fuga dignissimos officiis. Voluptatum error iste, nihil pariatur odio voluptatem molestiae, sit ipsum officiis ex, sed modi ut doloremque provident expedita accusantium earum quidem eveniet ratione ea aperiam. Molestias!</span>
<span>Sed earum consequuntur ut ea quod officiis animi, nemo expedita sint ullam magni impedit dicta minima debitis, quidem, repudiandae architecto dolorem delectus? Aspernatur porro tenetur, quae quasi iusto earum, id.</span>
<span>Voluptas dolore voluptates enim cum quasi dicta atque vitae aliquid omnis incidunt possimus quis molestiae, necessitatibus porro molestias, recusandae autem consectetur, officiis dignissimos in. Quas incidunt odio obcaecati quod aspernatur.</span>
<span>Dolorum, temporibus adipisci dignissimos quod, modi ipsam voluptates ipsa autem necessitatibus perferendis magni, veritatis repudiandae maxime veniam repellendus quo minima quibusdam porro illo neque delectus molestiae facere ab. Reiciendis, sapiente.</span>
<span>Facere quam qui expedita tenetur optio reprehenderit odit aliquid, officia corrupti vel commodi deserunt nesciunt recusandae beatae quas assumenda iusto ex, quibusdam. Doloremque similique, sit nulla nemo tempora voluptates eum?</span>
<span>Magnam voluptas eveniet qui voluptatum cupiditate, natus blanditiis ipsam consequuntur, ex quia, odit. Velit maxime sint repellat totam, sit, nobis in temporibus quia pariatur praesentium magni ipsa harum eveniet, laudantium.</span>
<span>Dolorum amet laudantium maiores, modi fugit, harum sint ratione ex ad nihil at velit quam numquam corrupti, esse dolor praesentium laboriosam explicabo. In, itaque, suscipit adipisci nihil ab facilis praesentium.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, autem ea nemo et provident, architecto minus deleniti laborum expedita earum omnis, voluptas officiis deserunt. Laudantium nesciunt fugit quae nulla reiciendis.</span>
<span>Officiis, vero magni aspernatur earum soluta qui animi optio nihil pariatur ad, molestiae possimus a omnis cum impedit ab atque ducimus, quas? Iste est alias voluptatem amet itaque assumenda obcaecati?</span>
<span>Reiciendis veniam laboriosam neque, vero odio nisi placeat vitae provident quia debitis omnis praesentium numquam dolores adipisci explicabo nihil recusandae, repudiandae velit esse expedita blanditiis! Rerum mollitia cum suscipit veniam!</span>
<span>Quaerat voluptatibus laborum, laudantium nisi dolorum officia id soluta cumque. Ex, voluptate doloremque placeat quo harum dignissimos architecto ipsam adipisci cum nisi repellendus quisquam ipsa dolorem odio aspernatur. Cum, distinctio.</span>
<span>Voluptates ut, quam earum non repellat sit aperiam facere id iste totam sint quidem nemo odit delectus ab culpa, sed voluptate ipsam quos commodi magnam. Ipsum quos reiciendis molestiae nesciunt.</span>
<span>Dolorum quis rerum architecto consectetur! Magni suscipit adipisci voluptates reiciendis eos et minus, inventore quod quisquam aliquid, molestiae, fuga nostrum ipsa! Velit debitis distinctio consectetur sed esse iste aspernatur, sit.</span>
<span>Dignissimos at, doloremque enim vero voluptatem mollitia fugit soluta corporis veniam similique sed temporibus deserunt quisquam eligendi, ducimus ut molestias sunt quibusdam. Perferendis officia, vero facere iste, libero voluptate numquam!</span>
<span>Repellat laboriosam eum magnam, nam explicabo assumenda fugit fugiat, cumque, laudantium a itaque repudiandae. Omnis, laudantium, expedita? Nisi iusto at aut, recusandae, non veniam harum tempora voluptates laboriosam sint laudantium.</span>
<span>Quasi quae rerum labore accusamus, optio est pariatur excepturi. Voluptatem tenetur fugit doloribus molestiae officiis fuga commodi voluptate, distinctio magni accusamus, labore sequi eligendi reprehenderit, id dicta ullam magnam ipsum.</span>
<span>Quidem dolor in reprehenderit, consectetur. Tempore consectetur provident aperiam ab ducimus obcaecati maiores illum voluptas ipsam beatae. Beatae porro magni, sint assumenda fugiat illum, consequuntur atque unde eligendi, quod id!</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsum illo, facere soluta, enim placeat repudiandae exercitationem sed numquam ratione maxime eligendi dignissimos, ex voluptatum eaque aperiam! Veritatis, pariatur, deleniti.</span>
<span>Pariatur nulla ducimus, labore saepe temporibus, doloremque, minima totam odit harum corporis omnis impedit quod iusto mollitia culpa aliquid aut laborum earum et magnam fugit vitae deserunt vel. Atque, dignissimos.</span>
<span>Fugiat accusamus aspernatur corrupti, porro? Reiciendis placeat cupiditate ea dolorem magnam eligendi molestias distinctio numquam consequuntur fuga ad, atque quaerat saepe beatae delectus explicabo laudantium suscipit porro sed corrupti accusantium.</span>
<span>Omnis dolor pariatur iure nulla quasi exercitationem eum obcaecati perferendis laudantium, alias voluptatem sunt, sapiente ducimus similique totam, architecto minus, culpa. Impedit, veritatis, vero. Error nesciunt nemo laudantium doloremque harum.</span>
<span>Tempora ipsum obcaecati, nemo, a exercitationem, modi commodi explicabo voluptates possimus in, suscipit corporis beatae ad alias veniam culpa ipsa? Optio, quas, enim! Omnis, non, reprehenderit est illum numquam doloribus!</span>
<span>Impedit reiciendis quia perferendis, odit natus unde qui explicabo laudantium ipsam dolorem eligendi veritatis. Neque, sapiente mollitia consectetur tenetur delectus repellendus nihil quae magnam suscipit amet voluptatibus itaque, magni possimus!</span>
<span>Perferendis impedit voluptas aliquid reiciendis, ipsam rem consectetur suscipit corrupti tenetur. Ducimus saepe, quibusdam debitis hic veniam aliquid laborum cumque rerum minima magnam itaque, quod, excepturi blanditiis illo officia aliquam?</span>
<span>Cupiditate quasi aut adipisci at sed eaque quo, nulla aperiam labore rem ducimus illum ut quaerat nemo earum fugit accusantium, doloribus soluta molestiae sequi, odit quis quam sapiente voluptates nostrum!</span>
<span>Impedit pariatur ab quod hic rem illo voluptatibus, ipsum ipsam ut magnam quasi amet quae ipsa quo maiores est suscipit non sint delectus inventore. Autem, quibusdam, odit! Odio, dolorum, quo.</span>
<span>Qui ipsum ipsa sit laudantium commodi eligendi itaque, beatae tempora tempore. Porro expedita nisi minus eaque magni, culpa quibusdam. Doloremque dolorum cupiditate hic! Voluptatem esse hic error sit ab nihil.</span>
</p>
</div>
<div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit!</div>
Updated according to comments.
Update: For dynamic height, you could consider using this JavaScript (jQuery) code:
$(function () {
var resizeWin = function () {
$(".content").css("top", $(".header").outerHeight());
};
resizeWin();
$(window).resize(resizeWin);
});
JSBin: http://output.jsbin.com/wikeketequ

We Keep Coding

JavaScript is the programming language of the Web.