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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 >
<div >
<a href="#">Logo</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#main-menu-toggle" aria-controls="main-menu-toggle" aria-expanded="false"><span ></span></button>
<div id="main-menu-toggle">
<ul >
<li ><a href="#">About Me</a></li>
<li ><a href="#">Personal Blog</a></li>
</ul>
</div>
</div>
<!-- container-lg -->
</nav>
<main>
<div >
<div >
<div >
<!-- <input type="search" 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" >
<ul >
<li ><a href="#early-life">Early Life</a></li>
<li ><a href="#military">Military</a></li>
<li ><a href="#education">Education</a></li>
<li ><a href="#hobbies">Hobbies</a></li>
<li ><a href="#career">Career</a></li>
</ul>
</div>
</div>
<div data-bs-spy="scroll" data-bs-target="#scrollspy1" data-bs-offset="0">
<section id="early-life" >
<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" >
<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" >
<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" >
<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 >
<p>© Copyright 2022 Joe Smith. All Rights Reserved.</p>
</div>
<!-- container-lg -->
</footer>
</body>
</html>CodePudding user response：
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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 >
<div >
<a href="#">Logo</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#main-menu-toggle" aria-controls="main-menu-toggle" aria-expanded="false"><span ></span></button>
<div id="main-menu-toggle">
<ul >
<li ><a href="#">About Me</a></li>
<li ><a href="#">Personal Blog</a></li>
</ul>
</div>
</div>
<!-- container-lg -->
</nav>
<main>
<div >
<div >
<div id='mainSidebar'>
<!-- <input type="search" 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" >
<ul >
<li ><a href="#early-life">Early Life</a></li>
<li ><a href="#military">Military</a></li>
<li ><a href="#education">Education</a></li>
<li ><a href="#hobbies">Hobbies</a></li>
<li ><a href="#career">Career</a></li>
</ul>
</div>
</div>
<div data-bs-spy="scroll" data-bs-target="#scrollspy1" data-bs-offset="0">
<section id="early-life" >
<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" >
<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" >
<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" >
<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 >
<p>© Copyright 2022 Joe Smith. All Rights Reserved.</p>
</div>
<!-- container-lg -->
</footer>
</body>
</html>CodePudding user response：
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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 >
<div >
<a href="#">Logo</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#main-menu-toggle" aria-controls="main-menu-toggle" aria-expanded="false"><span ></span></button>
<div id="main-menu-toggle">
<ul >
<li ><a href="#">About Me</a></li>
<li ><a href="#">Personal Blog</a></li>
</ul>
</div>
</div>
<!-- container-lg -->
</nav>
<main>
<div >
<div >
<div >
<!-- <input type="search" 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" >
<ul >
<li ><a href="#early-life">Early Life</a></li>
<li ><a href="#military">Military</a></li>
<li ><a href="#education">Education</a></li>
<li ><a href="#hobbies">Hobbies</a></li>
<li ><a href="#career">Career</a></li>
</ul>
</div>
</div>
<div data-bs-spy="scroll" data-bs-target="#scrollspy1" data-bs-offset="0">
<section id="early-life" >
<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" >
<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" >
<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" >
<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 >
<p>© Copyright 2022 Joe Smith. All Rights Reserved.</p>
</div>
<!-- container-lg -->
</footer>
</body>
</html>CodePudding user response：
As mentioned, the main issue is how to deal with the body padding.
There might be a complex solution using sticky, though given that you already set up a script, here's one way.
Add a CSS :root and one more CSS class .scrolled-up main #scrollspy1, and with your script assign the dynamic height to the variable --navbar-height.
If the navbar height is known, you can skip the script, the :root and replace the variable in the added class with that known height.
With this you can e.g. adjust the top for your sticky sidebar menu.
The benefit of go about this using a css variable/class, compared to set an inline css style (which by the way should avoided if possible), is that you can control when that property is in use with standard css rules.
I also removed setting the body padding inline using the script (again, avoid inline css if possible), and used the same varible to set its value.
Stack snippet
<!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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
:root {
--navbar-height: auto;
}
body {
padding-top: var(--navbar-height);
}
.autohide {
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
z-index: 1030;
}
.scrolled-down {
transform: translateY(-100%);
transition: transform 0.4s ease-in-out;
}
.scrolled-up {
transform: translateY(0);
transition: transform 0.4s ease-in-out;
}
.scrolled-up main #scrollspy1 {
top: calc(var(--navbar-height) 1.5rem);
transition: top 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;
var r = document.querySelector(':root');
r.style.setProperty('--navbar-height', 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 >
<div >
<a href="#">Logo</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#main-menu-toggle" aria-controls="main-menu-toggle" aria-expanded="false"><span ></span></button>
<div id="main-menu-toggle">
<ul >
<li ><a href="#">About Me</a></li>
<li ><a href="#">Personal Blog</a></li>
</ul>
</div>
</div>
<!-- container-lg -->
</nav>
<main>
<div >
<div >
<div >
<!-- <input type="search" 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" >
<ul >
<li ><a href="#early-life">Early Life</a></li>
<li ><a href="#military">Military</a></li>
<li ><a href="#education">Education</a></li>
<li ><a href="#hobbies">Hobbies</a></li>
<li ><a href="#career">Career</a></li>
</ul>
</div>
</div>
<div data-bs-spy="scroll" data-bs-target="#scrollspy1" data-bs-offset="0">
<section id="early-life" >
<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" >
<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" >
<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" >
<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 >
<p>© Copyright 2022 Joe Smith. All Rights Reserved.</p>
</div>
<!-- container-lg -->
</footer>
</body>
</html>