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>
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>