Below, I have a simple sticky navigation. When I scroll to a particular element on the page, I'm able to see an active class applied to that navigation item. But, when I click on the navigation item, I'm able to scroll to it, but the active class quickly flashes and then goes away. I think it's an issue with the height of the element, but I'm not sure.
Why doesn't the active class apply when the nav item is clicked on?
$(document).ready(function () {
$(document).on("scroll", onScroll);
});
function onScroll(event) {
let scrollPosition = $(document).scrollTop();
$("aside a").each(function () {
let currentLink = $(this);
let refElement = $(currentLink.attr("href"));
if (
refElement.position().top <= scrollPosition &&
refElement.position().top + refElement.height() > scrollPosition
) {
$("aside a").removeClass("clicked");
currentLink.addClass("clicked");
} else {
currentLink.removeClass("clicked");
}
});
}
/* Duru Sans */
#import url("https://fonts.googleapis.com/css2?family=Duru+Sans&display=swap");
body {
font-family: "Duru Sans", sans-serif;
}
html {
scroll-behavior: smooth;
}
.content {
padding: 1rem;
}
.inner__content {
display: flex;
position: relative;
}
.inner__content aside.nav {
display: none;
}
#media (min-width: 576px) {
.inner__content aside.nav {
display: flex;
flex-direction: column;
margin-right: 2.5rem;
min-width: 260px;
height: 300px;
position: sticky;
top: 8rem;
}
.inner__content aside.nav ul {
margin: 0;
padding: 0;
list-style: none;
margin: 1.5rem 0;
}
.inner__content aside.nav ul li {
margin: 1rem 0;
font-size: 1rem;
line-height: 1.5rem;
display: flex;
align-items: center;
}
.inner__content aside.nav ul li:first-child, .inner__content aside.nav ul li:last-child {
margin-top: 0;
}
.inner__content aside.nav ul li a {
text-decoration: none;
color: #6d7582;
transition: all 0.2s ease;
}
.inner__content aside.nav ul li a:hover, .inner__content aside.nav ul li a:focus-visible {
color: #005fec;
}
.inner__content aside.nav ul li a.clicked {
border-left: 4px solid #005fec;
color: #005fec;
height: 1.5rem;
padding-left: 0.5rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="inner__content">
<div class="desktop-plus">
<aside class="nav">
<h6 class="kicker kicker--bold">On this page:</h6>
<ul>
<li class="small" data-toc-idx="0">
<a class="ccc-nav" href="#definition">What is it?</a>
</li>
<li class="small" data-toc-idx="1">
<a class="ccc-nav" href="#ccvcc">What is A vs. B?</a>
</li>
<li class="small" data-toc-idx="2">
<a class="ccc-nav" href="#features">Features</a>
</li>
<li class="small" data-toc-idx="3">
<a class="ccc-nav" href="#onOff">On-site vs. Off-site</a>
</li>
<li class="small" data-toc-idx="4">
<a class="ccc-nav" href="#pricing">Pricing</a>
</li>
<li class="small" data-toc-idx="5">
<a class="ccc-nav" href="#whyUs">Why us?</a>
</li>
<li class="small" data-toc-idx="6">
<a class="ccc-nav" href="#faq">FAQs</a>
</li>
</ul>
</aside>
</div>
<div class="primary-content">
<h2 id="definition" class="sticky-nav">What is a it?</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<h2 id="ccvcc" class="sticky-nav">What is A vs. B?</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<h2 id="features" class="sticky-nav">Some features</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<div class="table tablet-plus">
<h2 class="table__header" id="onOff">On-site vs. Off-site</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
</div>
<h2 class="sticky-nav" id="pricing">Some pricing facts</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<div id="whyUs" class="why sticky-nav tablet-plus">
<h2>Why us? For real!</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
</div>
<h2 class="sticky-nav" id="faq">Some common questions</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
</div>
</div>
</div>
I've passed the 'current' item outside of the .each function. There are probably more effective ways of doing this though.
$(document).ready(function () {
$(document).on("scroll", onScroll);
});
function onScroll(event) {
let scrollPosition = $(document).scrollTop();
let current;
$("aside a").removeClass("clicked");
$("aside a").each(function () {
let currentLink = $(this);
let refElement = $(currentLink.attr("href"));
if ( refElement.position().top <= scrollPosition ) {
current = $(this);
}
});
current.addClass("clicked");
}
/* Duru Sans */
#import url("https://fonts.googleapis.com/css2?family=Duru+Sans&display=swap");
body {
font-family: "Duru Sans", sans-serif;
}
html {
scroll-behavior: smooth;
}
.content {
padding: 1rem;
}
.inner__content {
display: flex;
position: relative;
}
.inner__content aside.nav {
display: none;
}
#media (min-width: 576px) {
.inner__content aside.nav {
display: flex;
flex-direction: column;
margin-right: 2.5rem;
min-width: 260px;
height: 300px;
position: sticky;
top: 8rem;
}
.inner__content aside.nav ul {
margin: 0;
padding: 0;
list-style: none;
margin: 1.5rem 0;
}
.inner__content aside.nav ul li {
margin: 1rem 0;
font-size: 1rem;
line-height: 1.5rem;
display: flex;
align-items: center;
}
.inner__content aside.nav ul li:first-child, .inner__content aside.nav ul li:last-child {
margin-top: 0;
}
.inner__content aside.nav ul li a {
text-decoration: none;
color: #6d7582;
transition: all 0.2s ease;
}
.inner__content aside.nav ul li a:hover, .inner__content aside.nav ul li a:focus-visible {
color: #005fec;
}
.inner__content aside.nav ul li a.clicked {
border-left: 4px solid #005fec;
color: #005fec;
height: 1.5rem;
padding-left: 0.5rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="inner__content">
<div class="desktop-plus">
<aside class="nav">
<h6 class="kicker kicker--bold">On this page:</h6>
<ul>
<li class="small" data-toc-idx="0">
<a class="ccc-nav" href="#definition">What is it?</a>
</li>
<li class="small" data-toc-idx="1">
<a class="ccc-nav" href="#ccvcc">What is A vs. B?</a>
</li>
<li class="small" data-toc-idx="2">
<a class="ccc-nav" href="#features">Features</a>
</li>
<li class="small" data-toc-idx="3">
<a class="ccc-nav" href="#onOff">On-site vs. Off-site</a>
</li>
<li class="small" data-toc-idx="4">
<a class="ccc-nav" href="#pricing">Pricing</a>
</li>
<li class="small" data-toc-idx="5">
<a class="ccc-nav" href="#whyUs">Why us?</a>
</li>
<li class="small" data-toc-idx="6">
<a class="ccc-nav" href="#faq">FAQs</a>
</li>
</ul>
</aside>
</div>
<div class="primary-content">
<h2 id="definition" class="sticky-nav">What is a it?</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<h2 id="ccvcc" class="sticky-nav">What is A vs. B?</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<h2 id="features" class="sticky-nav">Some features</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<div class="table tablet-plus">
<h2 class="table__header" id="onOff">On-site vs. Off-site</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
</div>
<h2 class="sticky-nav" id="pricing">Some pricing facts</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
<div id="whyUs" class="why sticky-nav tablet-plus">
<h2>Why us? For real!</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
</div>
<h2 class="sticky-nav" id="faq">Some common questions</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum laudantium eius asperiores hic vitae eum magni amet maiores placeat. Ut, illum labore eum rem iste molestiae tempore obcaecati soluta deserunt odio consequatur iusto maiores, quod, eos quis. Provident, ipsa a fugiat deleniti saepe doloremque sit temporibus laudantium quis natus sint incidunt hic rerum in, consequatur at assumenda repellat voluptas. Iste odio voluptatibus, rem fuga officia ea. Aspernatur error temporibus, vel facilis cupiditate consequatur commodi? Consectetur velit suscipit exercitationem ratione dicta aperiam delectus, quis ipsa consequuntur, veritatis pariatur? Praesentium dicta, nobis laudantium dolores consequatur fugiat, sed voluptas autem quis molestias placeat.</p>
<p>Consequatur delectus doloremque velit ullam fuga nihil fugit mollitia vel rerum, distinctio alias laborum unde fugiat et saepe, quisquam ratione, eos voluptatibus veniam temporibus culpa adipisci quis totam. Facilis maiores at blanditiis ipsum asperiores fuga nobis, sunt error? Voluptas impedit fuga nisi expedita perferendis, natus esse quia ducimus ullam, aut voluptatum, hic minus asperiores in quam nulla tempore doloremque assumenda. Perspiciatis nulla consectetur quibusdam nobis, sit aspernatur incidunt praesentium. Iste suscipit nisi quibusdam qui porro earum enim blanditiis aperiam voluptas nulla, in ipsa nam autem voluptate obcaecati. Modi, maxime voluptatibus molestiae, nam accusamus in impedit, nulla repudiandae exercitationem expedita laboriosam!</p>
<p>Veniam nihil quae doloribus magni ad incidunt reiciendis reprehenderit inventore exercitationem sit tempore perferendis sapiente repellat, vero nisi enim blanditiis necessitatibus! Eligendi enim accusantium exercitationem iure ipsa incidunt voluptates maiores natus eveniet repudiandae, eius veritatis quod molestiae atque! Doloremque eligendi aut corporis totam quaerat, inventore molestiae consectetur labore obcaecati iste numquam ipsum atque qui, deleniti est cumque dignissimos. Mollitia modi cupiditate nisi voluptatem iusto atque, deleniti molestias. Beatae excepturi similique voluptates vero nulla corporis asperiores ullam hic quae, adipisci voluptas minus aut inventore alias expedita, exercitationem quibusdam at repudiandae numquam. Sunt aut aperiam iusto harum aliquam atque voluptatibus odit laboriosam.</p>
<p>Esse enim nam veritatis? Non est minus excepturi amet tempore illum, ullam porro. Dolore ut reiciendis fuga asperiores accusamus praesentium. Ipsam perspiciatis, mollitia nam autem totam laboriosam harum. Quasi, omnis repellendus eveniet sed quidem possimus vero natus voluptate beatae perferendis commodi voluptas amet, assumenda nulla earum laboriosam reiciendis. Dicta architecto doloremque molestias sit, adipisci provident explicabo laboriosam perferendis perspiciatis. Cumque voluptate doloremque reprehenderit accusantium sequi quo harum iusto odit nisi non aliquam placeat eligendi consequuntur, cum recusandae fuga aspernatur deleniti eaque autem optio incidunt magnam veniam ab ratione. Animi placeat voluptatem consectetur optio vitae veritatis cupiditate ipsam suscipit ducimus dolorum.</p>
</div>
</div>
</div>
Related
My aim is to have the images appear and slide horizontally in to place as I scroll down.
I have 4 floated images translated off the document and with opacity:0. I have tried to apply an intersersectionObserver to each of the images, but when I log the intersection ratio, it is under 0.1 for most of the images, even when they are fully within the viewport (I didn't set a root).
I tried to deal with this by tweaking the root margin, but that seemed to make no difference. My .active CSS class does get triggered for all of the images when I scroll down, but I don't know why. Also, the transition I set to my CSS classes seems not to be working.
I suspect I made a mistake in my use of intersectionObserver, but after reading the documentation, I cannot see where I have gone wrong.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="site-wrap">
<h1>Slide in on Scroll</h1>
<p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.</p>
<p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
<p>Adipisicing elit. Tempore tempora rerum..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
<img src="http://unsplash.it/400/400" class= "slide-in">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p>
<img src="http://unsplash.it/400/401" class="slide-in">
<p> at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.</p>
<img src="http://unsplash.it/200/500" class="slide-in">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet <img src="http://unsplash.it/200/200" class="align-right slide-in"> temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis</p>
<p>laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
<img src="http://unsplash.it/400/400" class="slide-in">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
</div>
<script>
const myImages = document.querySelectorAll('img');
const myObserver = new IntersectionObserver(function(entries) {
if (myImages[0].isIntersecting) {
myImages[0].classList.add('align-left');
}
if (myImages[1].isIntersecting) {
myImages[1].classList.add('align-right')
// repeat the above for myImages[2] and myImages[3]
}
entries.forEach(e => {
console.log(e.intersectionRatio)
if (e.isIntersecting) {
console.log(e.target)
e.target.classList.remove('slide-in')
e.target.classList.add('active')
}
}),
{ threshold: 0.7,
rootMargin: "0px 200px 0px -200px"}
});
for (var e of myImages) {
myObserver.observe(e);
}
</script>
<style>
html {
box-sizing: border-box;
background: #ffc600;
font-family: 'helvetica neue';
font-size: 20px;
font-weight: 200;
}
body {
margin: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
h1 {
margin-top: 0;
}
.site-wrap {
max-width: 700px;
margin: 100px auto;
background: white;
padding: 40px;
text-align: justify;
}
.align-left {
float: left;
margin-right: 20px;
transition: all 0.5s;
}
.align-right {
float: right;
margin-left: 20px;
transition: all 0.5s;
}
.slide-in {
opacity: 0;
transition: all 0.5s;
}
.align-left.slide-in {
transform: translateX(-30%) scale(0.95);
transition: all 0.5s;
}
.align-right.slide-in {
transform: translateX(30%) scale(0.95);
transition: all 0.5s;
}
.slide-in.active {
opacity: 1;
transform: translateX(0%) scale(1);
transition: all 0.5s;
}
</style>
</body>
</html>
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>
this code is for a component to jump to the top of the page, but during run after refresh the page is no longer running and gives an error, this project is on nuxt and vue framework. Does anyone know what is the reason for this issue or what change is needed ???
Outside the nuxt firmware this code Works well, but fails in Framework After the first refresh, it no longer works and gives an error !!!
Error text :
TypeError : Cannot create property 'display' on string 'bottom:30px;right:30px;'
Vue.component('back-to-top', {
template: '#backToTop',
name: 'BackToTop',
props: {
text: {
type: String,
default: 'text'
},
visibleoffset: {
type: [String, Number],
default: 600
},
right: {
type: String,
default: '30px',
},
bottom: {
type: String,
default: '40px',
},
},
data() {
return {
visible: false
}
},
mounted() {
window.smoothscroll = () => {
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop
if (currentScroll > 0) {
window.requestAnimationFrame(window.smoothscroll)
window.scrollTo(0, Math.floor(currentScroll - (currentScroll / 5)))
}
}
window.addEventListener('scroll', this.catchScroll)
},
destroyed() {
window.removeEventListener('scroll', this.catchScroll)
},
methods: {
catchScroll() {
this.visible = (window.pageYOffset > parseInt(this.visibleoffset))
},
backToTop() {
window.smoothscroll()
this.$emit('scrolled');
}
}
})
new Vue({
}).$mount('#app')
.back-to-top-fade-enter-active,
.back-to-top-fade-leave-active {
transition: opacity .7s;
}
.back-to-top-fade-enter,
.back-to-top-fade-leave-to {
opacity: 0;
}
.vue-back-to-top {
position: fixed;
z-index: 1000;
cursor: pointer;
}
.vue-back-to-top .default {
width: 160px;
color: #ffffff;
text-align: center;
line-height: 30px;
background-color: #f5c85c;
border-radius: 3px;
}
.vue-back-to-top .default span {
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Backtotop Component</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<template id="backToTop">
<div>
<transition name="back-to-top-fade">
<div class="vue-back-to-top" :style="`bottom:${this.bottom};right:${this.right};`" v-show="visible" #click="backToTop">
<slot>
<div class="default">
<span>
{{ text }}
</span>
</div>
</slot>
</div>
</transition>
</div>
</template>
<div id="app">
<back-to-top text="Back to top"></back-to-top>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In id libero fugit atque repudiandae cumque officiis, sapiente placeat? Quisquam aperiam quos quod hic natus officiis alias perferendis quibusdam in provident? Reprehenderit perferendis consequatur,
neque magnam pariatur temporibus nemo corporis necessitatibus architecto itaque voluptatum unde suscipit a nihil quod nisi minima voluptate. Natus omnis quia est iusto modi quae asperiores vitae! Eaque, eos earum. Quod quas eum magnam corporis eos.
Atque sunt impedit officia aperiam fugit beatae voluptates velit delectus fugiat nam qui, rerum perferendis ipsum, nulla recusandae nemo quas eligendi? Iste magnam ad mollitia et magni ratione aliquam fugiat alias deserunt temporibus exercitationem
iusto quaerat doloremque eveniet, quo tempora delectus fugit eius odit. Repudiandae neque itaque doloribus delectus laboriosam deserunt. Accusamus omnis iste reiciendis? Autem voluptatibus nostrum illum ipsam sed animi molestias quis dignissimos,
pariatur quisquam, consectetur mollitia rerum ut nesciunt aperiam vitae excepturi deleniti, aliquid alias qui? Debitis, similique. At corporis vero voluptates veritatis aliquid, nam quas dolores blanditiis quidem odit libero accusamus maiores a nobis
distinctio mollitia eveniet, asperiores similique. Ut distinctio modi reiciendis, aperiam aspernatur nam vel. Cum molestiae, maiores distinctio inventore earum dolor veritatis eum laborum ab voluptates numquam perferendis adipisci sed dicta at fuga
temporibus vero? Reiciendis eveniet iusto officia sint ab rerum! Sapiente, quas. Placeat, repudiandae, asperiores nostrum culpa illum, possimus saepe tenetur ea expedita harum in nemo explicabo. Quia sapiente beatae commodi libero enim distinctio
asperiores reprehenderit dolores pariatur aliquam. Natus, molestiae accusamus. Earum dolores, ea pariatur eum sint iste, quibusdam perspiciatis necessitatibus nostrum quam eius voluptas mollitia, unde velit quia beatae doloribus totam ex omnis animi
similique! Dolorum totam eum possimus quia. Aut perspiciatis, neque impedit, quasi exercitationem odio esse iusto explicabo quas quibusdam ex laboriosam labore, error eum veritatis et ratione unde delectus optio autem reiciendis nobis. Magni reiciendis
ipsam earum! Vel similique commodi accusantium maxime modi debitis laboriosam. Cumque non sint consequuntur delectus ut. Quidem non incidunt tempore, impedit distinctio harum vero dicta doloribus dolorum perferendis ducimus qui quia at? Ad asperiores
voluptate sit autem, voluptatibus odit dicta obcaecati impedit adipisci debitis aspernatur! Sit deserunt nesciunt fuga? Ipsum, vero. Animi, iste possimus consectetur non vel necessitatibus cum quo aspernatur mollitia. Dolores quae quisquam ad fugiat
officiis, omnis, quia reprehenderit sed ipsum quas veritatis esse delectus error. Minus, necessitatibus saepe, doloremque non consequuntur esse eos sit, porro mollitia deleniti consequatur assumenda? Voluptatum earum sint aspernatur, dolore consequatur
quas, ut eum est nesciunt iure voluptates blanditiis atque, repellat animi asperiores voluptatem aliquam autem. Repudiandae mollitia quam ab praesentium qui doloremque nihil velit! Accusamus tempora quos mollitia est explicabo, quia recusandae consectetur
cupiditate! Temporibus inventore dignissimos totam repellat, eius porro quae neque, adipisci magni ab commodi quidem animi fuga dolores vel officia. Expedita? Beatae atque in incidunt assumenda tempore maiores eum libero ad explicabo eligendi molestias,
provident autem totam velit laborum mollitia eius architecto adipisci culpa aperiam dolores praesentium esse minus sunt? Eos! Sit, pariatur? Quia eaque, quae animi amet repudiandae molestias nesciunt soluta eum inventore fugiat ipsam, repellat rerum
rem perspiciatis? Ea suscipit temporibus officiis. Enim id fugiat laborum eius, quod totam? Deleniti nam magni officiis delectus, odio consequatur quam temporibus itaque sequi ex cupiditate molestias debitis est? Reprehenderit, ab! Ipsam iusto temporibus
labore praesentium fuga deserunt cum modi distinctio ratione possimus. Recusandae animi, ex fugit voluptatibus obcaecati nesciunt, eligendi molestias voluptate sapiente, nulla pariatur. Enim et nisi sunt praesentium minima. Unde temporibus a eligendi
doloribus. Ipsam repudiandae voluptatibus animi non optio! Molestiae dolorem consequuntur earum nemo consectetur dicta libero beatae, eos odio accusantium itaque, fuga tenetur quod eaque. Qui unde ab quos placeat debitis nemo fugiat, aliquam nam aperiam
minus eveniet. Sunt aliquam, corrupti voluptate impedit tempore doloribus, repellendus consequuntur laborum quam non asperiores ex, at suscipit omnis tempora ipsa cum itaque iure dignissimos voluptas. Sapiente in corporis odio quisquam perferendis!
Excepturi, voluptatem. Quas voluptatum eum hic quisquam itaque, aut ratione sapiente rem iste alias libero quaerat. Molestiae ab dignissimos dolores tempora, laudantium pariatur amet totam, delectus, debitis labore temporibus atque. Praesentium, aliquid
unde necessitatibus placeat aspernatur error distinctio vitae sequi labore alias cumque enim sunt, quae quod suscipit quisquam quia a at provident, dolor qui aut consequuntur cupiditate. Officiis, fuga. Autem nisi quae laborum eveniet eligendi temporibus
et soluta veniam laboriosam recusandae quia impedit fugiat praesentium unde maiores, nam facilis adipisci distinctio voluptatum. Accusantium perspiciatis dicta aut consectetur natus voluptatem? Nobis odit saepe molestias qui eius asperiores at aliquam
natus soluta nam magnam, sed veritatis totam eaque beatae alias iusto! Facere cumque aliquid sit totam saepe accusantium nostrum porro culpa. Ducimus, expedita. Harum excepturi sapiente maxime perferendis, maiores consequatur eius corrupti sint facere
atque sit magni aliquam possimus esse enim neque eaque deserunt aliquid amet voluptatum deleniti voluptatibus fuga quasi. Quos eaque temporibus omnis maxime officia quibusdam vel impedit. Possimus officiis ipsam numquam exercitationem, enim culpa
sint illum, molestias a quidem consequatur delectus aperiam suscipit voluptas et velit hic! Optio. Reiciendis maxime impedit, excepturi illo ab dolorem et nemo voluptas dolores optio quo rerum magnam unde ullam facere doloribus commodi nam nostrum
tempore. Amet deserunt molestiae tempore inventore, porro mollitia? Qui excepturi tenetur quia eius minima odio labore fuga quod, aliquid laudantium sequi iure? Asperiores reiciendis debitis commodi repudiandae nisi ab consequatur modi ipsa, id nemo
voluptate aliquid sunt optio? Consequuntur impedit nobis provident quasi! Repellat et culpa consectetur praesentium iste, quisquam perferendis ratione facilis ex voluptatum commodi, fugiat quidem amet aut magni consequuntur a laboriosam adipisci vero
impedit inventore. Illo quae iure repudiandae reiciendis perspiciatis, accusantium quas incidunt exercitationem saepe itaque voluptates hic cupiditate. Repellendus, earum labore alias adipisci asperiores minus corporis quo quas laudantium, odit sint
corrupti dolore. Cum numquam quidem quae enim mollitia quisquam atque debitis libero accusantium ipsa eum nulla ad est maxime ducimus, corrupti exercitationem eos animi? Voluptates placeat, ipsa repellendus quidem quod dignissimos exercitationem?
Consequuntur beatae molestias ab dolor vel aliquid tenetur rerum. Fugit tenetur excepturi voluptatum blanditiis quisquam fugiat. Deserunt cupiditate similique, dolorem adipisci commodi ad eaque quas, maxime debitis itaque repellat nam! Voluptates,
ut? In, nobis iusto reprehenderit tempora voluptatibus earum quas neque alias, commodi, voluptate a. Error odio consequatur, sequi ratione dicta nam modi eos culpa? Accusamus voluptates repudiandae sunt a? Possimus omnis rem necessitatibus, enim eos
quis quas ullam, suscipit odio nesciunt iure dolores voluptas architecto veniam voluptatibus nostrum, eum recusandae assumenda in? Corrupti, iure voluptas? Consequuntur accusantium similique atque? Dolores ipsum rem magnam at soluta nesciunt, debitis
sint quidem ipsa adipisci distinctio, quas cupiditate fugiat ullam illum officia quo doloribus eveniet. Expedita quis iure nihil nulla incidunt. Perspiciatis, reiciendis. Dolorem architecto culpa accusantium maiores pariatur id tempora, sit iusto
velit asperiores, enim nesciunt suscipit laboriosam rerum, officia sint numquam amet voluptates blanditiis iure in. Officiis, eveniet? Harum, natus perferendis. Aut temporibus quasi assumenda ab molestiae, omnis veritatis, laboriosam, dolore dolores
voluptas corrupti quis adipisci. Dolore, quae blanditiis ducimus eaque impedit placeat quaerat nobis dolores enim voluptas quis sunt aperiam? Magni, animi quibusdam iusto cupiditate vero quia ipsum adipisci a facilis amet sed cumque ab architecto.
Quis quibusdam omnis temporibus obcaecati itaque impedit blanditiis, repellat laborum ex doloremque culpa eveniet! Recusandae rerum aspernatur quae beatae aut obcaecati et, deleniti perspiciatis quibusdam, veniam dolore suscipit voluptatum aliquid
tempore quod a iste dignissimos veritatis ipsa reiciendis modi velit culpa reprehenderit voluptate! Consectetur. Suscipit eum ducimus consequuntur architecto reprehenderit recusandae vitae cumque, commodi ipsam dolores maiores! Dolore, assumenda explicabo!
Sit ipsam magni dicta aliquid similique quo praesentium debitis est, quos quaerat nesciunt quis? Dolores eaque voluptatem hic vitae asperiores necessitatibus recusandae, architecto officiis repellat unde, expedita sed itaque illo quidem! Quos ad tempora
quod cumque veritatis minus error ducimus? Architecto eveniet laboriosam dolore? Id fugiat molestiae a sed assumenda eligendi, velit expedita possimus sequi ipsa tempore itaque fugit officia consequuntur deleniti praesentium doloremque nulla similique.
Ipsum numquam suscipit, ut dolores voluptatibus accusantium aspernatur. Voluptas beatae tempore culpa temporibus aliquid accusamus esse, harum et debitis consectetur numquam hic eius odio non ducimus fugiat ut id labore, aspernatur reprehenderit!
Quod voluptates id incidunt nulla voluptatum. Rem at soluta unde? Eveniet laborum cum magni iure vitae mollitia quibusdam! Odio libero distinctio maxime culpa, rerum laudantium, nam, expedita inventore doloremque ut dolorum adipisci non neque nostrum
aperiam. Quos reiciendis ipsum itaque excepturi, eos provident, aspernatur cupiditate illo, incidunt natus iste consequatur. Officia officiis nisi corporis omnis neque. Neque quod vitae itaque impedit maxime aliquam ullam quisquam adipisci. Ad nemo
nisi voluptate blanditiis, neque commodi alias iure maiores, magnam modi placeat praesentium quidem excepturi libero esse, perferendis cumque consectetur distinctio laboriosam dignissimos debitis fugiat! Cum sequi earum cumque? Debitis qui ea voluptatum
maiores nobis dolorem dolores, blanditiis sunt voluptates fugit numquam tempora, quo dignissimos nostrum neque nesciunt sit nisi officiis voluptas velit? Beatae sunt magnam ratione voluptate. Dignissimos. Adipisci amet temporibus delectus corrupti
sint minima incidunt, voluptas saepe veniam iusto voluptates hic itaque sapiente corporis blanditiis minus pariatur reprehenderit quod at? Reiciendis sit repellendus voluptas rem ratione? Eius. Placeat enim minus autem explicabo aperiam quos! Ullam
vel nobis vitae dignissimos labore id cum officia aut excepturi eligendi facere sequi minus quasi, necessitatibus magni ad blanditiis harum aliquam laudantium!
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'></script>
<script src="./script.js"></script>
</body>
</html>
The problem comes from style binding which should be like :
:style="{bottom:bottom,right:right}"
You should probably change your
:style="`bottom:${this.bottom};right:${this.right};`"
to :style='{bottom, right}'
I definitely dont think you can use ${this.bottom} in template since this is already interpreted
Thanks to user #Boussadjra Brahim , to solve this problem, the code must be changed as follows:
:style="`bottom:${this.bottom};right:${this.right};`"
to this :
:style="{bottom:bottom,right:right}"
in short :
:style="{bottom,right}"
Thanks to all the friends who responded :)
There is a section inside which there is a block with a fixed button. He has position: sticky and transform: rotate. Because the transform property is set: rotate - the blue block crawls out of the section. How can I fix this?
section {
padding: 10px 0 40px;
background: #ececec;
height: 1600px;
}
.filter {
display: inline-block;
font-size: 16px;
color: white;
background: blue;
position: sticky;
left: 0;
top: 50%;
transform: translate(-44%, -50%) rotate(-89deg);
padding: 6px 54px;
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam eius mollitia corrupti. Consequuntur excepturi cum quia soluta iste unde fugiat adipisci, eligendi vitae? Tenetur velit debitis assumenda quos esse minus incidunt iste animi laborum porro voluptate quasi commodi, sapiente quod. Est dicta qui suscipit animi dignissimos ipsam deserunt, libero similique assumenda voluptas facere quis provident, adipisci culpa atque earum aperiam non itaque repellendus alias harum iure perferendis voluptates? Consequuntur veritatis pariatur sit in illum, ea mollitia culpa error dolore temporibus magnam repellendus deserunt magni repudiandae dolor odit praesentium. Ad excepturi unde omnis quas asperiores reiciendis nemo corporis dolorum doloribus dolor eaque iste voluptate soluta facere dignissimos nisi, obcaecati velit praesentium atque perspiciatis placeat. Debitis natus id dolorem soluta. Ab, temporibus quia est magni, atque consequuntur amet neque veniam sequi deserunt ad quam, optio animi omnis ipsa? Voluptas beatae perferendis quod veritatis, voluptate nulla vitae nihil suscipit molestiae provident adipisci similique maiores excepturi iure sequi pariatur corrupti dolores eius. Totam, sint itaque ipsam saepe consectetur hic iusto vitae reprehenderit atque! Saepe non similique porro temporibus hic illo optio quidem illum culpa odit, debitis qui commodi beatae est eveniet inventore laudantium incidunt possimus sit animi perspiciatis ad excepturi. Consequatur a, totam minima esse vitae dolorum exercitationem qui sint? Adipisci ut reiciendis dolores! Suscipit sapiente iusto perferendis! Ipsa adipisci, voluptas et unde aliquid doloribus quas harum ullam modi veniam illo ratione illum rerum doloremque, repellendus quidem. Ratione voluptates totam eaque ipsum itaque incidunt hic fuga iusto ipsam, accusamus sequi modi autem illo rem? Porro aliquam aut tempore aspernatur sunt ipsam, velit distinctio minus atque? Quidem soluta distinctio dignissimos, veritatis laborum excepturi nobis eos voluptatem deserunt accusantium cupiditate temporibus! Autem nisi numquam impedit hic nobis ad maxime. Id, obcaecati natus quae nobis quasi adipisci provident illum, quo recusandae necessitatibus quidem itaque, quibusdam odit impedit expedita quam eaque. Ipsum delectus autem accusamus iste optio ea eos, sunt est accusantium nobis ipsa dolorem, eligendi deserunt cupiditate, mollitia commodi omnis libero? Cupiditate quam at earum doloribus inventore. Cum vitae quam repellendus itaque ab ea, voluptatum culpa accusamus alias ipsam consectetur beatae quisquam ratione sit ipsa quaerat incidunt veritatis consequatur quidem mollitia excepturi neque. Pariatur modi magni ipsum quisquam molestiae commodi repellat impedit molestias veniam, cumque quas beatae id tenetur autem in quo at distinctio. Voluptas velit blanditiis aperiam nulla hic repellat nemo beatae impedit iste numquam tempore fugit, iusto reprehenderit totam, excepturi delectus, sunt molestias optio! Fuga sequi ipsam molestias necessitatibus similique obcaecati dolorem accusamus perferendis magnam repudiandae repellendus eos iste nemo itaque possimus consequuntur dolorum incidunt reprehenderit, nisi omnis. Fuga voluptate iure quis atque tempore, in quibusdam saepe veniam laboriosam quaerat animi aspernatur modi dolores explicabo quos, rem nisi? Omnis nam fuga placeat commodi vitae, quibusdam iure nisi mollitia ex eaque? Nihil fuga, nulla totam in, quibusdam facere repellat cum laudantium omnis, nobis a porro autem nisi placeat dolore. Perferendis, est libero. Fugit adipisci est aut. Ullam sapiente hic architecto eius beatae nam quaerat quo dolores sit eum, adipisci pariatur aperiam, vel unde quas. Cupiditate aspernatur commodi nostrum alias, asperiores, voluptate deleniti mollitia ut adipisci harum sequi vel, accusamus hic quos suscipit beatae quis corrupti eveniet? Dolorum ex, natus quo qui repudiandae totam. Laboriosam delectus odit sequi esse enim corrupti! Sunt, ab! Accusantium laborum ea aspernatur possimus inventore dolorum iure nesciunt ullam ratione deleniti, corrupti, molestiae fugiat, quidem id ab voluptates nobis dolore. Doloremque facilis voluptatibus corrupti quam cupiditate obcaecati tenetur quo excepturi a suscipit aliquam, commodi deserunt nulla nobis dolor, est autem enim vero possimus accusamus esse beatae? Officiis quibusdam doloribus placeat nam odit sunt, tenetur tempora, praesentium nostrum tempore delectus in! Sed delectus quisquam consequatur id, ad molestiae accusamus consectetur eius. Vel necessitatibus, dicta ab dolorum molestias illo exercitationem ad debitis harum possimus. Perspiciatis deleniti recusandae, dolor officiis eum deserunt consequatur reprehenderit qui, reiciendis, pariatur ipsum. Ratione consectetur cupiditate excepturi, sint labore nostrum nihil, eligendi repellendus error quibusdam nesciunt odio debitis magni autem amet ab expedita maxime voluptatibus hic! Voluptatem ullam dolores consequatur voluptate officiis cumque delectus magni aliquam quis. Doloremque, incidunt quisquam doloribus natus, eveniet ipsa hic magnam totam reiciendis exercitationem similique quibusdam temporibus harum pariatur sapiente magni, id expedita earum! Maxime fuga quod, incidunt harum omnis velit id quasi error accusamus sunt illo eum a itaque autem, sapiente repudiandae atque, dicta natus officiis saepe enim et distinctio assumenda. Laboriosam eaque porro dignissimos quaerat temporibus corrupti ipsam sunt unde non nam mollitia vero, ea assumenda. Cum, ut quisquam quibusdam molestias consequuntur quos nam ea nihil similique unde at fugit dolore veniam consectetur illo praesentium fuga mollitia rem necessitatibus hic ipsam magnam voluptatibus non autem? Explicabo quae nesciunt assumenda dolorum recusandae provident maxime amet repudiandae expedita odit quam in praesentium autem quia iure aut architecto obcaecati, blanditiis ratione hic eum nostrum? Vero accusamus saepe corrupti, sed natus optio, nesciunt reprehenderit voluptas laborum delectus iste.
<section>
<a href="#filter" class="filter">
Filter
</a>
content
</section>
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias ab tempore sint doloremque cum harum facere dicta repellat totam animi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sequi dignissimos quos maxime corporis vel beatae laborum architecto consequuntur. Impedit deleniti libero rem corporis possimus? Nisi maxime atque tempora veritatis magnam. Temporibus aperiam ducimus voluptatum vitae tenetur saepe, inventore quibusdam! Ipsam molestiae dolores itaque reprehenderit? Repudiandae tempora enim accusantium error modi sequi dolorum dolorem, magni molestias harum. Perspiciatis cum debitis tempore ex, magnam autem accusantium voluptas alias sapiente amet illum deserunt quaerat quibusdam labore molestiae quia eligendi, illo deleniti minima harum aspernatur reprehenderit, id tempora? Eum similique error sit unde, cumque quo, aspernatur nobis reiciendis quam voluptatibus, magnam corrupti. Velit fuga quisquam corrupti excepturi, placeat sed eveniet dolor cumque suscipit voluptatibus eos quas, provident vitae necessitatibus! Iusto accusantium maxime ad soluta suscipit magnam fugiat officia dicta ea molestias mollitia asperiores consequuntur eaque quibusdam, modi aliquam eos? Ipsa, vero rerum? Nulla laborum perferendis ratione id ex minus inventore a reiciendis unde repellendus, magnam enim possimus, sunt fugiat eius rem exercitationem voluptatum adipisci cupiditate, magni deserunt esse quidem quasi nihil! In quidem soluta nostrum, voluptas rem repellendus quis omnis illum vero. Cum commodi atque saepe dolorum harum nam aliquam reprehenderit sed soluta nobis, molestiae quibusdam praesentium natus eius? Dolore magnam aperiam atque nulla libero aliquid recusandae reiciendis hic doloremque nemo, nam neque doloribus cumque quasi iste architecto laboriosam nostrum corrupti quod excepturi! Iure beatae cupiditate nihil doloremque autem atque sint mollitia omnis illum ut eius unde provident rem, a sequi! Quaerat illo impedit doloribus libero eos atque corrupti iusto accusantium, excepturi at sit deleniti asperiores voluptates molestias porro reiciendis facere omnis enim vitae placeat error. Voluptatum tempore nulla eaque quasi quidem unde inventore labore dolores non, odio numquam incidunt tempora debitis ad error, culpa amet. Magnam laboriosam sint mollitia nostrum quaerat illo assumenda id, ab odit officia. Praesentium, temporibus repellendus doloremque sunt minus alias? Vel deleniti culpa assumenda in enim. Veniam debitis aperiam sequi molestiae placeat officiis maxime consectetur ea atque deleniti eius mollitia perspiciatis repellendus aspernatur at nesciunt exercitationem veritatis corrupti, ullam reiciendis consequatur. Nam ab at provident obcaecati doloremque nihil optio delectus voluptatum aliquid recusandae cupiditate, culpa eos laudantium! Quis officia reiciendis ipsum modi nihil sequi et dolores ducimus eveniet doloremque sit nisi, saepe aut corporis, tenetur culpa? Rem ipsa et reprehenderit, qui culpa dolore nihil sit veritatis esse, cum molestias vitae soluta, explicabo ducimus delectus doloremque perspiciatis quidem exercitationem similique? Nulla iure quasi sed iste eligendi est perferendis quibusdam ex, earum, in ad necessitatibus. Atque, quo cum enim voluptatibus dolorem possimus odio quidem cumque impedit alias, sequi aperiam tempora veritatis, dolore totam omnis accusantium molestiae magnam? Recusandae unde maxime numquam illo, nulla provident harum libero modi debitis officia. Illo cumque quos nemo reiciendis cum ad praesentium, laudantium nostrum autem voluptatum quidem possimus magni ex dicta quisquam debitis omnis. Rerum voluptate ea rem tempora dolore sit animi dolor corrupti, modi aliquam tenetur quae voluptatibus, voluptas adipisci numquam, a debitis quisquam! Consequuntur totam eos recusandae eum nisi temporibus natus sit blanditiis rem amet cumque soluta, distinctio pariatur, delectus perferendis omnis modi inventore provident iusto ea iure officiis quaerat nam harum. Repellendus dignissimos porro molestias, voluptatum corporis atque modi nobis voluptate quibusdam? Eos officia adipisci debitis vel animi reprehenderit, repudiandae inventore ullam quis praesentium tenetur itaque odit sequi repellendus quibusdam sed aliquam laboriosam? Ex provident quasi veritatis dolore cumque at enim aliquam itaque eos pariatur! Voluptates, voluptatibus eius reprehenderit sint perferendis accusantium odit, iure sequi ipsam, animi debitis vero tempora quia? Officia culpa modi ea mollitia labore fuga dolorem architecto commodi soluta. Molestias illum vel, in sint repellat modi quas corporis voluptate totam omnis debitis repellendus facilis voluptates ex adipisci? Amet error molestias non tempora, reiciendis est exercitationem ea, ratione, animi necessitatibus sapiente aliquid dolorum. Nisi iure praesentium reiciendis fugit architecto in, eaque, perspiciatis impedit quis animi est repellat iste delectus expedita deleniti deserunt, hic doloribus? Cupiditate aspernatur atque libero dolores quibusdam ipsum, vitae, rerum alias veniam facilis unde soluta quas totam minus officiis obcaecati, ut repudiandae facere ab eius nesciunt tempore iusto nostrum. Atque, tempora rem, delectus sit voluptates provident ipsam similique, ex iusto doloribus asperiores. Consequatur assumenda iusto deleniti hic tempora at. Architecto totam maiores harum rerum aperiam alias placeat fugit modi quia! Dicta tempore qui, magni nulla necessitatibus a velit hic cum quibusdam est eaque sit assumenda deserunt cumque maiores eius ea quasi dolorum nesciunt ab officia omnis. Itaque eveniet fuga a illum esse, animi maiores excepturi possimus! Commodi incidunt eligendi labore modi officiis ex voluptatibus iusto eos aspernatur. Architecto animi consectetur voluptas culpa dignissimos tenetur vitae error magni, doloribus commodi cumque labore. Aperiam modi dolore, sapiente saepe deleniti cupiditate enim ipsam reiciendis unde tempora beatae pariatur ipsum veritatis dignissimos consequuntur inventore fugit repudiandae vero facere illo! Eos similique veniam magnam odit deserunt ipsa est aliquam aliquid consequuntur, architecto, optio asperiores eligendi sint quia, numquam repellendus aperiam nisi adipisci!
</div>
section {
padding: 10px 0 40px;
background: #ececec;
height: 1600px;
}
.filter {
display: inline-block;
font-size: 16px;
color: white;
background: blue;
position: sticky;
left: 0;
top: 50%;
/* stop it from overlapping the bottom */ margin-bottom:70px;
/* remove -- transform: translate(-44%, -50%) rotate(-89deg); */
/* add -- 160% instead of -50% */
transform: translate(-44%, 160%) rotate(-89deg);
padding: 6px 54px;
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam eius mollitia corrupti. Consequuntur excepturi cum quia soluta iste unde fugiat adipisci, eligendi vitae? Tenetur velit debitis assumenda quos esse minus incidunt iste animi laborum porro voluptate quasi commodi, sapiente quod. Est dicta qui suscipit animi dignissimos ipsam deserunt, libero similique assumenda voluptas facere quis provident, adipisci culpa atque earum aperiam non itaque repellendus alias harum iure perferendis voluptates? Consequuntur veritatis pariatur sit in illum, ea mollitia culpa error dolore temporibus magnam repellendus deserunt magni repudiandae dolor odit praesentium. Ad excepturi unde omnis quas asperiores reiciendis nemo corporis dolorum doloribus dolor eaque iste voluptate soluta facere dignissimos nisi, obcaecati velit praesentium atque perspiciatis placeat. Debitis natus id dolorem soluta. Ab, temporibus quia est magni, atque consequuntur amet neque veniam sequi deserunt ad quam, optio animi omnis ipsa? Voluptas beatae perferendis quod veritatis, voluptate nulla vitae nihil suscipit molestiae provident adipisci similique maiores excepturi iure sequi pariatur corrupti dolores eius. Totam, sint itaque ipsam saepe consectetur hic iusto vitae reprehenderit atque! Saepe non similique porro temporibus hic illo optio quidem illum culpa odit, debitis qui commodi beatae est eveniet inventore laudantium incidunt possimus sit animi perspiciatis ad excepturi. Consequatur a, totam minima esse vitae dolorum exercitationem qui sint? Adipisci ut reiciendis dolores! Suscipit sapiente iusto perferendis! Ipsa adipisci, voluptas et unde aliquid doloribus quas harum ullam modi veniam illo ratione illum rerum doloremque, repellendus quidem. Ratione voluptates totam eaque ipsum itaque incidunt hic fuga iusto ipsam, accusamus sequi modi autem illo rem? Porro aliquam aut tempore aspernatur sunt ipsam, velit distinctio minus atque? Quidem soluta distinctio dignissimos, veritatis laborum excepturi nobis eos voluptatem deserunt accusantium cupiditate temporibus! Autem nisi numquam impedit hic nobis ad maxime. Id, obcaecati natus quae nobis quasi adipisci provident illum, quo recusandae necessitatibus quidem itaque, quibusdam odit impedit expedita quam eaque. Ipsum delectus autem accusamus iste optio ea eos, sunt est accusantium nobis ipsa dolorem, eligendi deserunt cupiditate, mollitia commodi omnis libero? Cupiditate quam at earum doloribus inventore. Cum vitae quam repellendus itaque ab ea, voluptatum culpa accusamus alias ipsam consectetur beatae quisquam ratione sit ipsa quaerat incidunt veritatis consequatur quidem mollitia excepturi neque. Pariatur modi magni ipsum quisquam molestiae commodi repellat impedit molestias veniam, cumque quas beatae id tenetur autem in quo at distinctio. Voluptas velit blanditiis aperiam nulla hic repellat nemo beatae impedit iste numquam tempore fugit, iusto reprehenderit totam, excepturi delectus, sunt molestias optio! Fuga sequi ipsam molestias necessitatibus similique obcaecati dolorem accusamus perferendis magnam repudiandae repellendus eos iste nemo itaque possimus consequuntur dolorum incidunt reprehenderit, nisi omnis. Fuga voluptate iure quis atque tempore, in quibusdam saepe veniam laboriosam quaerat animi aspernatur modi dolores explicabo quos, rem nisi? Omnis nam fuga placeat commodi vitae, quibusdam iure nisi mollitia ex eaque? Nihil fuga, nulla totam in, quibusdam facere repellat cum laudantium omnis, nobis a porro autem nisi placeat dolore. Perferendis, est libero. Fugit adipisci est aut. Ullam sapiente hic architecto eius beatae nam quaerat quo dolores sit eum, adipisci pariatur aperiam, vel unde quas. Cupiditate aspernatur commodi nostrum alias, asperiores, voluptate deleniti mollitia ut adipisci harum sequi vel, accusamus hic quos suscipit beatae quis corrupti eveniet? Dolorum ex, natus quo qui repudiandae totam. Laboriosam delectus odit sequi esse enim corrupti! Sunt, ab! Accusantium laborum ea aspernatur possimus inventore dolorum iure nesciunt ullam ratione deleniti, corrupti, molestiae fugiat, quidem id ab voluptates nobis dolore. Doloremque facilis voluptatibus corrupti quam cupiditate obcaecati tenetur quo excepturi a suscipit aliquam, commodi deserunt nulla nobis dolor, est autem enim vero possimus accusamus esse beatae? Officiis quibusdam doloribus placeat nam odit sunt, tenetur tempora, praesentium nostrum tempore delectus in! Sed delectus quisquam consequatur id, ad molestiae accusamus consectetur eius. Vel necessitatibus, dicta ab dolorum molestias illo exercitationem ad debitis harum possimus. Perspiciatis deleniti recusandae, dolor officiis eum deserunt consequatur reprehenderit qui, reiciendis, pariatur ipsum. Ratione consectetur cupiditate excepturi, sint labore nostrum nihil, eligendi repellendus error quibusdam nesciunt odio debitis magni autem amet ab expedita maxime voluptatibus hic! Voluptatem ullam dolores consequatur voluptate officiis cumque delectus magni aliquam quis. Doloremque, incidunt quisquam doloribus natus, eveniet ipsa hic magnam totam reiciendis exercitationem similique quibusdam temporibus harum pariatur sapiente magni, id expedita earum! Maxime fuga quod, incidunt harum omnis velit id quasi error accusamus sunt illo eum a itaque autem, sapiente repudiandae atque, dicta natus officiis saepe enim et distinctio assumenda. Laboriosam eaque porro dignissimos quaerat temporibus corrupti ipsam sunt unde non nam mollitia vero, ea assumenda. Cum, ut quisquam quibusdam molestias consequuntur quos nam ea nihil similique unde at fugit dolore veniam consectetur illo praesentium fuga mollitia rem necessitatibus hic ipsam magnam voluptatibus non autem? Explicabo quae nesciunt assumenda dolorum recusandae provident maxime amet repudiandae expedita odit quam in praesentium autem quia iure aut architecto obcaecati, blanditiis ratione hic eum nostrum? Vero accusamus saepe corrupti, sed natus optio, nesciunt reprehenderit voluptas laborum delectus iste.
<section>
<a href="#filter" class="filter">
Filter
</a>
content
</section>
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias ab tempore sint doloremque cum harum facere dicta repellat totam animi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sequi dignissimos quos maxime corporis vel beatae laborum architecto consequuntur. Impedit deleniti libero rem corporis possimus? Nisi maxime atque tempora veritatis magnam. Temporibus aperiam ducimus voluptatum vitae tenetur saepe, inventore quibusdam! Ipsam molestiae dolores itaque reprehenderit? Repudiandae tempora enim accusantium error modi sequi dolorum dolorem, magni molestias harum. Perspiciatis cum debitis tempore ex, magnam autem accusantium voluptas alias sapiente amet illum deserunt quaerat quibusdam labore molestiae quia eligendi, illo deleniti minima harum aspernatur reprehenderit, id tempora? Eum similique error sit unde, cumque quo, aspernatur nobis reiciendis quam voluptatibus, magnam corrupti. Velit fuga quisquam corrupti excepturi, placeat sed eveniet dolor cumque suscipit voluptatibus eos quas, provident vitae necessitatibus! Iusto accusantium maxime ad soluta suscipit magnam fugiat officia dicta ea molestias mollitia asperiores consequuntur eaque quibusdam, modi aliquam eos? Ipsa, vero rerum? Nulla laborum perferendis ratione id ex minus inventore a reiciendis unde repellendus, magnam enim possimus, sunt fugiat eius rem exercitationem voluptatum adipisci cupiditate, magni deserunt esse quidem quasi nihil! In quidem soluta nostrum, voluptas rem repellendus quis omnis illum vero. Cum commodi atque saepe dolorum harum nam aliquam reprehenderit sed soluta nobis, molestiae quibusdam praesentium natus eius? Dolore magnam aperiam atque nulla libero aliquid recusandae reiciendis hic doloremque nemo, nam neque doloribus cumque quasi iste architecto laboriosam nostrum corrupti quod excepturi! Iure beatae cupiditate nihil doloremque autem atque sint mollitia omnis illum ut eius unde provident rem, a sequi! Quaerat illo impedit doloribus libero eos atque corrupti iusto accusantium, excepturi at sit deleniti asperiores voluptates molestias porro reiciendis facere omnis enim vitae placeat error. Voluptatum tempore nulla eaque quasi quidem unde inventore labore dolores non, odio numquam incidunt tempora debitis ad error, culpa amet. Magnam laboriosam sint mollitia nostrum quaerat illo assumenda id, ab odit officia. Praesentium, temporibus repellendus doloremque sunt minus alias? Vel deleniti culpa assumenda in enim. Veniam debitis aperiam sequi molestiae placeat officiis maxime consectetur ea atque deleniti eius mollitia perspiciatis repellendus aspernatur at nesciunt exercitationem veritatis corrupti, ullam reiciendis consequatur. Nam ab at provident obcaecati doloremque nihil optio delectus voluptatum aliquid recusandae cupiditate, culpa eos laudantium! Quis officia reiciendis ipsum modi nihil sequi et dolores ducimus eveniet doloremque sit nisi, saepe aut corporis, tenetur culpa? Rem ipsa et reprehenderit, qui culpa dolore nihil sit veritatis esse, cum molestias vitae soluta, explicabo ducimus delectus doloremque perspiciatis quidem exercitationem similique? Nulla iure quasi sed iste eligendi est perferendis quibusdam ex, earum, in ad necessitatibus. Atque, quo cum enim voluptatibus dolorem possimus odio quidem cumque impedit alias, sequi aperiam tempora veritatis, dolore totam omnis accusantium molestiae magnam? Recusandae unde maxime numquam illo, nulla provident harum libero modi debitis officia. Illo cumque quos nemo reiciendis cum ad praesentium, laudantium nostrum autem voluptatum quidem possimus magni ex dicta quisquam debitis omnis. Rerum voluptate ea rem tempora dolore sit animi dolor corrupti, modi aliquam tenetur quae voluptatibus, voluptas adipisci numquam, a debitis quisquam! Consequuntur totam eos recusandae eum nisi temporibus natus sit blanditiis rem amet cumque soluta, distinctio pariatur, delectus perferendis omnis modi inventore provident iusto ea iure officiis quaerat nam harum. Repellendus dignissimos porro molestias, voluptatum corporis atque modi nobis voluptate quibusdam? Eos officia adipisci debitis vel animi reprehenderit, repudiandae inventore ullam quis praesentium tenetur itaque odit sequi repellendus quibusdam sed aliquam laboriosam? Ex provident quasi veritatis dolore cumque at enim aliquam itaque eos pariatur! Voluptates, voluptatibus eius reprehenderit sint perferendis accusantium odit, iure sequi ipsam, animi debitis vero tempora quia? Officia culpa modi ea mollitia labore fuga dolorem architecto commodi soluta. Molestias illum vel, in sint repellat modi quas corporis voluptate totam omnis debitis repellendus facilis voluptates ex adipisci? Amet error molestias non tempora, reiciendis est exercitationem ea, ratione, animi necessitatibus sapiente aliquid dolorum. Nisi iure praesentium reiciendis fugit architecto in, eaque, perspiciatis impedit quis animi est repellat iste delectus expedita deleniti deserunt, hic doloribus? Cupiditate aspernatur atque libero dolores quibusdam ipsum, vitae, rerum alias veniam facilis unde soluta quas totam minus officiis obcaecati, ut repudiandae facere ab eius nesciunt tempore iusto nostrum. Atque, tempora rem, delectus sit voluptates provident ipsam similique, ex iusto doloribus asperiores. Consequatur assumenda iusto deleniti hic tempora at. Architecto totam maiores harum rerum aperiam alias placeat fugit modi quia! Dicta tempore qui, magni nulla necessitatibus a velit hic cum quibusdam est eaque sit assumenda deserunt cumque maiores eius ea quasi dolorum nesciunt ab officia omnis. Itaque eveniet fuga a illum esse, animi maiores excepturi possimus! Commodi incidunt eligendi labore modi officiis ex voluptatibus iusto eos aspernatur. Architecto animi consectetur voluptas culpa dignissimos tenetur vitae error magni, doloribus commodi cumque labore. Aperiam modi dolore, sapiente saepe deleniti cupiditate enim ipsam reiciendis unde tempora beatae pariatur ipsum veritatis dignissimos consequuntur inventore fugit repudiandae vero facere illo! Eos similique veniam magnam odit deserunt ipsa est aliquam aliquid consequuntur, architecto, optio asperiores eligendi sint quia, numquam repellendus aperiam nisi adipisci!
</div>
Try this.
section {
padding: 10px 0 40px;
background: #ececec;
height: 1600px;
}
.filter {
display: inline-block;
font-size: 16px;
color: white;
background: blue;
padding: 10px 6px;
vertical-align: middle;
text-align: center;
writing-mode: tb;
height: 160px;
box-sizing: border-box;
position: sticky;
left: 0;
top: calc(50% - 80px);
transform: rotate(180deg);
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam eius mollitia corrupti. Consequuntur excepturi cum quia soluta iste unde fugiat adipisci, eligendi vitae? Tenetur velit debitis assumenda quos esse minus incidunt iste animi laborum porro voluptate quasi commodi, sapiente quod. Est dicta qui suscipit animi dignissimos ipsam deserunt, libero similique assumenda voluptas facere quis provident, adipisci culpa atque earum aperiam non itaque repellendus alias harum iure perferendis voluptates? Consequuntur veritatis pariatur sit in illum, ea mollitia culpa error dolore temporibus magnam repellendus deserunt magni repudiandae dolor odit praesentium. Ad excepturi unde omnis quas asperiores reiciendis nemo corporis dolorum doloribus dolor eaque iste voluptate soluta facere dignissimos nisi, obcaecati velit praesentium atque perspiciatis placeat. Debitis natus id dolorem soluta. Ab, temporibus quia est magni, atque consequuntur amet neque veniam sequi deserunt ad quam, optio animi omnis ipsa? Voluptas beatae perferendis quod veritatis, voluptate nulla vitae nihil suscipit molestiae provident adipisci similique maiores excepturi iure sequi pariatur corrupti dolores eius. Totam, sint itaque ipsam saepe consectetur hic iusto vitae reprehenderit atque! Saepe non similique porro temporibus hic illo optio quidem illum culpa odit, debitis qui commodi beatae est eveniet inventore laudantium incidunt possimus sit animi perspiciatis ad excepturi. Consequatur a, totam minima esse vitae dolorum exercitationem qui sint? Adipisci ut reiciendis dolores! Suscipit sapiente iusto perferendis! Ipsa adipisci, voluptas et unde aliquid doloribus quas harum ullam modi veniam illo ratione illum rerum doloremque, repellendus quidem. Ratione voluptates totam eaque ipsum itaque incidunt hic fuga iusto ipsam, accusamus sequi modi autem illo rem? Porro aliquam aut tempore aspernatur sunt ipsam, velit distinctio minus atque? Quidem soluta distinctio dignissimos, veritatis laborum excepturi nobis eos voluptatem deserunt accusantium cupiditate temporibus! Autem nisi numquam impedit hic nobis ad maxime. Id, obcaecati natus quae nobis quasi adipisci provident illum, quo recusandae necessitatibus quidem itaque, quibusdam odit impedit expedita quam eaque. Ipsum delectus autem accusamus iste optio ea eos, sunt est accusantium nobis ipsa dolorem, eligendi deserunt cupiditate, mollitia commodi omnis libero? Cupiditate quam at earum doloribus inventore. Cum vitae quam repellendus itaque ab ea, voluptatum culpa accusamus alias ipsam consectetur beatae quisquam ratione sit ipsa quaerat incidunt veritatis consequatur quidem mollitia excepturi neque. Pariatur modi magni ipsum quisquam molestiae commodi repellat impedit molestias veniam, cumque quas beatae id tenetur autem in quo at distinctio. Voluptas velit blanditiis aperiam nulla hic repellat nemo beatae impedit iste numquam tempore fugit, iusto reprehenderit totam, excepturi delectus, sunt molestias optio! Fuga sequi ipsam molestias necessitatibus similique obcaecati dolorem accusamus perferendis magnam repudiandae repellendus eos iste nemo itaque possimus consequuntur dolorum incidunt reprehenderit, nisi omnis. Fuga voluptate iure quis atque tempore, in quibusdam saepe veniam laboriosam quaerat animi aspernatur modi dolores explicabo quos, rem nisi? Omnis nam fuga placeat commodi vitae, quibusdam iure nisi mollitia ex eaque? Nihil fuga, nulla totam in, quibusdam facere repellat cum laudantium omnis, nobis a porro autem nisi placeat dolore. Perferendis, est libero. Fugit adipisci est aut. Ullam sapiente hic architecto eius beatae nam quaerat quo dolores sit eum, adipisci pariatur aperiam, vel unde quas. Cupiditate aspernatur commodi nostrum alias, asperiores, voluptate deleniti mollitia ut adipisci harum sequi vel, accusamus hic quos suscipit beatae quis corrupti eveniet? Dolorum ex, natus quo qui repudiandae totam. Laboriosam delectus odit sequi esse enim corrupti! Sunt, ab! Accusantium laborum ea aspernatur possimus inventore dolorum iure nesciunt ullam ratione deleniti, corrupti, molestiae fugiat, quidem id ab voluptates nobis dolore. Doloremque facilis voluptatibus corrupti quam cupiditate obcaecati tenetur quo excepturi a suscipit aliquam, commodi deserunt nulla nobis dolor, est autem enim vero possimus accusamus esse beatae? Officiis quibusdam doloribus placeat nam odit sunt, tenetur tempora, praesentium nostrum tempore delectus in! Sed delectus quisquam consequatur id, ad molestiae accusamus consectetur eius. Vel necessitatibus, dicta ab dolorum molestias illo exercitationem ad debitis harum possimus. Perspiciatis deleniti recusandae, dolor officiis eum deserunt consequatur reprehenderit qui, reiciendis, pariatur ipsum. Ratione consectetur cupiditate excepturi, sint labore nostrum nihil, eligendi repellendus error quibusdam nesciunt odio debitis magni autem amet ab expedita maxime voluptatibus hic! Voluptatem ullam dolores consequatur voluptate officiis cumque delectus magni aliquam quis. Doloremque, incidunt quisquam doloribus natus, eveniet ipsa hic magnam totam reiciendis exercitationem similique quibusdam temporibus harum pariatur sapiente magni, id expedita earum! Maxime fuga quod, incidunt harum omnis velit id quasi error accusamus sunt illo eum a itaque autem, sapiente repudiandae atque, dicta natus officiis saepe enim et distinctio assumenda. Laboriosam eaque porro dignissimos quaerat temporibus corrupti ipsam sunt unde non nam mollitia vero, ea assumenda. Cum, ut quisquam quibusdam molestias consequuntur quos nam ea nihil similique unde at fugit dolore veniam consectetur illo praesentium fuga mollitia rem necessitatibus hic ipsam magnam voluptatibus non autem? Explicabo quae nesciunt assumenda dolorum recusandae provident maxime amet repudiandae expedita odit quam in praesentium autem quia iure aut architecto obcaecati, blanditiis ratione hic eum nostrum? Vero accusamus saepe corrupti, sed natus optio, nesciunt reprehenderit voluptas laborum delectus iste.
<section>
<a href="#filter" class="filter">
Filter
</a>
content
</section>
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias ab tempore sint doloremque cum harum facere dicta repellat totam animi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sequi dignissimos quos maxime corporis vel beatae laborum architecto consequuntur. Impedit deleniti libero rem corporis possimus? Nisi maxime atque tempora veritatis magnam. Temporibus aperiam ducimus voluptatum vitae tenetur saepe, inventore quibusdam! Ipsam molestiae dolores itaque reprehenderit? Repudiandae tempora enim accusantium error modi sequi dolorum dolorem, magni molestias harum. Perspiciatis cum debitis tempore ex, magnam autem accusantium voluptas alias sapiente amet illum deserunt quaerat quibusdam labore molestiae quia eligendi, illo deleniti minima harum aspernatur reprehenderit, id tempora? Eum similique error sit unde, cumque quo, aspernatur nobis reiciendis quam voluptatibus, magnam corrupti. Velit fuga quisquam corrupti excepturi, placeat sed eveniet dolor cumque suscipit voluptatibus eos quas, provident vitae necessitatibus! Iusto accusantium maxime ad soluta suscipit magnam fugiat officia dicta ea molestias mollitia asperiores consequuntur eaque quibusdam, modi aliquam eos? Ipsa, vero rerum? Nulla laborum perferendis ratione id ex minus inventore a reiciendis unde repellendus, magnam enim possimus, sunt fugiat eius rem exercitationem voluptatum adipisci cupiditate, magni deserunt esse quidem quasi nihil! In quidem soluta nostrum, voluptas rem repellendus quis omnis illum vero. Cum commodi atque saepe dolorum harum nam aliquam reprehenderit sed soluta nobis, molestiae quibusdam praesentium natus eius? Dolore magnam aperiam atque nulla libero aliquid recusandae reiciendis hic doloremque nemo, nam neque doloribus cumque quasi iste architecto laboriosam nostrum corrupti quod excepturi! Iure beatae cupiditate nihil doloremque autem atque sint mollitia omnis illum ut eius unde provident rem, a sequi! Quaerat illo impedit doloribus libero eos atque corrupti iusto accusantium, excepturi at sit deleniti asperiores voluptates molestias porro reiciendis facere omnis enim vitae placeat error. Voluptatum tempore nulla eaque quasi quidem unde inventore labore dolores non, odio numquam incidunt tempora debitis ad error, culpa amet. Magnam laboriosam sint mollitia nostrum quaerat illo assumenda id, ab odit officia. Praesentium, temporibus repellendus doloremque sunt minus alias? Vel deleniti culpa assumenda in enim. Veniam debitis aperiam sequi molestiae placeat officiis maxime consectetur ea atque deleniti eius mollitia perspiciatis repellendus aspernatur at nesciunt exercitationem veritatis corrupti, ullam reiciendis consequatur. Nam ab at provident obcaecati doloremque nihil optio delectus voluptatum aliquid recusandae cupiditate, culpa eos laudantium! Quis officia reiciendis ipsum modi nihil sequi et dolores ducimus eveniet doloremque sit nisi, saepe aut corporis, tenetur culpa? Rem ipsa et reprehenderit, qui culpa dolore nihil sit veritatis esse, cum molestias vitae soluta, explicabo ducimus delectus doloremque perspiciatis quidem exercitationem similique? Nulla iure quasi sed iste eligendi est perferendis quibusdam ex, earum, in ad necessitatibus. Atque, quo cum enim voluptatibus dolorem possimus odio quidem cumque impedit alias, sequi aperiam tempora veritatis, dolore totam omnis accusantium molestiae magnam? Recusandae unde maxime numquam illo, nulla provident harum libero modi debitis officia. Illo cumque quos nemo reiciendis cum ad praesentium, laudantium nostrum autem voluptatum quidem possimus magni ex dicta quisquam debitis omnis. Rerum voluptate ea rem tempora dolore sit animi dolor corrupti, modi aliquam tenetur quae voluptatibus, voluptas adipisci numquam, a debitis quisquam! Consequuntur totam eos recusandae eum nisi temporibus natus sit blanditiis rem amet cumque soluta, distinctio pariatur, delectus perferendis omnis modi inventore provident iusto ea iure officiis quaerat nam harum. Repellendus dignissimos porro molestias, voluptatum corporis atque modi nobis voluptate quibusdam? Eos officia adipisci debitis vel animi reprehenderit, repudiandae inventore ullam quis praesentium tenetur itaque odit sequi repellendus quibusdam sed aliquam laboriosam? Ex provident quasi veritatis dolore cumque at enim aliquam itaque eos pariatur! Voluptates, voluptatibus eius reprehenderit sint perferendis accusantium odit, iure sequi ipsam, animi debitis vero tempora quia? Officia culpa modi ea mollitia labore fuga dolorem architecto commodi soluta. Molestias illum vel, in sint repellat modi quas corporis voluptate totam omnis debitis repellendus facilis voluptates ex adipisci? Amet error molestias non tempora, reiciendis est exercitationem ea, ratione, animi necessitatibus sapiente aliquid dolorum. Nisi iure praesentium reiciendis fugit architecto in, eaque, perspiciatis impedit quis animi est repellat iste delectus expedita deleniti deserunt, hic doloribus? Cupiditate aspernatur atque libero dolores quibusdam ipsum, vitae, rerum alias veniam facilis unde soluta quas totam minus officiis obcaecati, ut repudiandae facere ab eius nesciunt tempore iusto nostrum. Atque, tempora rem, delectus sit voluptates provident ipsam similique, ex iusto doloribus asperiores. Consequatur assumenda iusto deleniti hic tempora at. Architecto totam maiores harum rerum aperiam alias placeat fugit modi quia! Dicta tempore qui, magni nulla necessitatibus a velit hic cum quibusdam est eaque sit assumenda deserunt cumque maiores eius ea quasi dolorum nesciunt ab officia omnis. Itaque eveniet fuga a illum esse, animi maiores excepturi possimus! Commodi incidunt eligendi labore modi officiis ex voluptatibus iusto eos aspernatur. Architecto animi consectetur voluptas culpa dignissimos tenetur vitae error magni, doloribus commodi cumque labore. Aperiam modi dolore, sapiente saepe deleniti cupiditate enim ipsam reiciendis unde tempora beatae pariatur ipsum veritatis dignissimos consequuntur inventore fugit repudiandae vero facere illo! Eos similique veniam magnam odit deserunt ipsa est aliquam aliquid consequuntur, architecto, optio asperiores eligendi sint quia, numquam repellendus aperiam nisi adipisci!
</div>
Put the rotation before the transform and specify the origin rotation like
transform-origin: top left;
This specifies whereabouts to rotate the element.
Here's a snippet below of what I think you want, I changed -89 to -90 to achieve a parallel position with the left side of the view-port.
Now to prevent the sticky element from passing the content div on the bottom I added a
margin-bottom: 13%;
section {
padding: 10px 0 40px;
background: #ececec;
height: 1600px;
}
.filter {
display: inline-block;
font-size: 16px;
color: white;
background: blue;
position: sticky;
left: 0;
top: 0%;
transform: rotate(-90deg) translateX(-100%) ;
transform-origin: top left;
padding: 6px 54px;
margin-bottom: 13%;
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam eius mollitia corrupti. Consequuntur excepturi cum quia soluta iste unde fugiat adipisci, eligendi vitae? Tenetur velit debitis assumenda quos esse minus incidunt iste animi laborum porro voluptate quasi commodi, sapiente quod. Est dicta qui suscipit animi dignissimos ipsam deserunt, libero similique assumenda voluptas facere quis provident, adipisci culpa atque earum aperiam non itaque repellendus alias harum iure perferendis voluptates? Consequuntur veritatis pariatur sit in illum, ea mollitia culpa error dolore temporibus magnam repellendus deserunt magni repudiandae dolor odit praesentium. Ad excepturi unde omnis quas asperiores reiciendis nemo corporis dolorum doloribus dolor eaque iste voluptate soluta facere dignissimos nisi, obcaecati velit praesentium atque perspiciatis placeat. Debitis natus id dolorem soluta. Ab, temporibus quia est magni, atque consequuntur amet neque veniam sequi deserunt ad quam, optio animi omnis ipsa? Voluptas beatae perferendis quod veritatis, voluptate nulla vitae nihil suscipit molestiae provident adipisci similique maiores excepturi iure sequi pariatur corrupti dolores eius. Totam, sint itaque ipsam saepe consectetur hic iusto vitae reprehenderit atque! Saepe non similique porro temporibus hic illo optio quidem illum culpa odit, debitis qui commodi beatae est eveniet inventore laudantium incidunt possimus sit animi perspiciatis ad excepturi. Consequatur a, totam minima esse vitae dolorum exercitationem qui sint? Adipisci ut reiciendis dolores! Suscipit sapiente iusto perferendis! Ipsa adipisci, voluptas et unde aliquid doloribus quas harum ullam modi veniam illo ratione illum rerum doloremque, repellendus quidem. Ratione voluptates totam eaque ipsum itaque incidunt hic fuga iusto ipsam, accusamus sequi modi autem illo rem? Porro aliquam aut tempore aspernatur sunt ipsam, velit distinctio minus atque? Quidem soluta distinctio dignissimos, veritatis laborum excepturi nobis eos voluptatem deserunt accusantium cupiditate temporibus! Autem nisi numquam impedit hic nobis ad maxime. Id, obcaecati natus quae nobis quasi adipisci provident illum, quo recusandae necessitatibus quidem itaque, quibusdam odit impedit expedita quam eaque. Ipsum delectus autem accusamus iste optio ea eos, iciis quibusdamis. Doloremque, incidunt quisquam doloribus natus, eveniet ipsa hic magnam totam reiciendis exercitationem similique quibusdam temporibus harum pariatur sapiente magni, id expedita earum! Maxime fuga quod, incidunt harum omnis velit id quasi error accusamus sunt illo eum a itaque autem, sapiente repudiandae atque, dicta natus officiis saepe enim et distinctio assumenda. Laboriosam eaque porro dignissimos quaerat temporibus corrupti ipsam sunt unde non nam mollitia vero, ea assumenda. Cum, ut quisquam quibusdam molestias consequuntur quos nam ea nihil similique unde at fugit dolore veniam consectetur illo praesentium fuga mollitia rem necessitatibus hic ipsam magnam voluptatibus non autem? Explicabo quae nesciunt assumenda dolorum recusandae provident maxime amet repudiandae expedita odit quam in praesentium autem quia iure aut architecto obcaecati, blanditiis ratione hic eum nostrum? Vero accusamus saepe corrupti, sed natus optio, nesciunt reprehenderit voluptas laborum delectus iste.
<section>
<a href="#filter" class="filter">
Filter
</a>
content
</section>
<div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias ab tempore sint doloremque cum harum facere dicta repellat totam animi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sequi dignissimos quos maxime corporis vel beatae laborum architecto consequuntur. Impedit deleniti libero rem corporis possimus? Nisi maxime atque tempora veritatis magnam. Temporibus aperiam ducimus voluptatum vitae tenetur saepe, inventore quibusdam! Ipsam molestiae dolores itaque reprehenderit? Repudiandae tempora enim accusantium error modi sequi dolorum dolorem, magni molestias harum. Perspiciatis cum debitis tempore ex, magnam autem accusantium voluptas alias sapiente amet illum deserunt quaerat quibusdam labore molestiae quia eligendi, illo deleniti minima harum aspernatur reprehenderit, id tempora? Eum similique error sit unde, cumque quo, aspernatur nobis reiciendis quam voluptatibus, magnam corrupti. Velit fuga quisquam corrupti excepturi, placeat sed eveniet dolor cumque suscipit voluptatibus eos quas, provident vitae necessitatibus! Iusto accusantium maxime ad soluta suscipit magnam fugiat officia dicta ea molestias mollitia asperiores consequuntur eaque quibusdam, modi aliquam eos? Ipsa, vero rerum? Nulla laborum perferendis ratione id ex minus inventore a reiciendis unde repellendus, magnam enim possimus, sunt fugiat eius rem exercitationem voluptatum adipisci cupiditate, magni deserunt esse quidem quasi nihil! In quidem soluta nostrum, voluptas rem repellendus quis omnis illum vero. Cum commodi atque saepe dolorum harum nam aliquam reprehenderit sed soluta nobis, molestiae quibusdam praesentium natus eius? Dolore magnam aperiam atque nulla libero aliquid recusandae reiciendis hic doloremque nemo, nam neque doloribus cumque quasi iste architecto laboriosam nostrum corrupti quod excepturi! Iure beatae cupiditate nihil doloremque autem atque sint mollitia omnis illum ut eius unde provident rem, a sequi! Quaerat illo impedit doloribus libero eos atque corrupti iusto accusantium, excepturi at sit deleniti asperiores voluptates molestias porro reiciendis facere omnis enim vitae placeat error. Voluptatum tempore nulla eaque quasi quidem unde inventore labore dolores non, odio numquam incidunt tempora debitis ad error, culpa amet. Magnam laboriosam sint mollitia nostrum quaerat illo assumenda id, ab odit officia. Praesentium, temporibus repellendus doloremque sunt minus alias? Vel deleniti culpa assumenda in enim. Veniam debitis aperiam sequi molestiae placeat officiis maxime consectetur ea atque deleniti eius mollitia perspiciatis repellendus aspernatur at nesciunt exercitationem veritatis corrupti, ullam reiciendis consequatur. Nam ab at provident obcaecati doloremque nihil optio delectus voluptatum aliquid recusandae cupiditate, culpa eos laudantium! Quis officia reiciendis ipsum modi nihil sequi et dolores ducimus eveniet doloremque sit nisi, saepe aut corporis, tenetur culpa? Rem ipsa et reprehenderit, qui culpa dolore nihil sit veritatis esse, cum molestias vitae soluta, explicabo ducimus delectus doloremque perspiciatis quidem exercitationem similique? Nulla iure quasi sed iste eligendi est perferendis quibusdam ex, earum, in ad necessitatibus. Atque, quo cum enim voluptatibus dolorem possimus odio quidem cumque impedit alias, sequi aperiam tempora veritatis, dolore totam omnis accusantium molestiae magnam? Recusandae unde maxime numquam illo, nulla provident harum libero modi debitis officia. Illo cumque quos nemo reiciendis cum ad praesentium, laudantium nostrum autem voluptatum quidem possimus magni ex dicta quisquam debitis omnis. Rerum voluptate ea rem tempora dolore sit animi dolor corrupti, modi aliquam tenetur quae voluptatibus, voluptas adipisci numquam, a debitis quisquam! Consequuntur totam eos recusandae eum nisi temporibus natus sit blanditiis rem amet cumque soluta, distinctio pariatur, delectus perferendis omnis modi inventore provident iusto ea iure officiis quaerat nam harum. Repellendus dignissimos porro molestias, voluptatum corporis atque modi nobis voluptate quibusdam? Eos officia adipisci debitis vel animi reprehenderit, repudiandae inventore ullam quis praesentium tenetur itaque odit sequi repellendus quibusdam sed aliquam laboriosam? Ex provident quasi veritatis dolore cumque at enim aliquam itaque eos pariatur! Voluptates, voluptatibus eius reprehenderit sint perferendis accusantium odit, iure sequi ipsam, animi debitis vero tempora quia? Officia culpa modi ea mollitia labore fuga dolorem architecto commodi soluta. Molestias illum vel, in sint repellat modi quas corporis voluptate totam omnis debitis repellendus facilis voluptates ex adipisci? Amet error molestias non tempora, reiciendis est exercitationem ea, ratione, animi necessitatibus sapiente aliquid dolorum. Nisi iure praesentium reiciendis fugit architecto in, eaque, perspiciatis impedit quis animi est repellat iste delectus expedita deleniti deserunt, hic doloribus? Cupiditate aspernatur atque libero dolores quibusdam ipsum, vitae, rerum alias veniam facilis unde soluta quas totam minus officiis obcaecati, ut repudiandae facere ab eius nesciunt tempore iusto nostrum. Atque, tempora rem, delectus sit voluptates provident ipsam similique, ex iusto doloribus asperiores. Consequatur assumenda iusto deleniti hic tempora at. Architecto totam maiores harum rerum aperiam alias placeat fugit modi quia! Dicta tempore qui, magni nulla necessitatibus a velit hic cum quibusdam est eaque sit assumenda deserunt cumque maiores eius ea quasi dolorum nesciunt ab officia omnis. Itaque eveniet fuga a illum esse, animi maiores excepturi possimus! Commodi incidunt eligendi labore modi officiis ex voluptatibus iusto eos aspernatur. Architecto animi consectetur voluptas culpa dignissimos tenetur vitae error magni, doloribus commodi cumque labore. Aperiam modi dolore, sapiente saepe deleniti cupiditate enim ipsam reiciendis unde tempora beatae pariatur ipsum veritatis dignissimos consequuntur inventore fugit repudiandae vero facere illo! Eos similique veniam magnam odit deserunt ipsa est aliquam aliquid consequuntur, architecto, optio asperiores eligendi sint quia, numquam repellendus aperiam nisi adipisci!
</div>
I'm struggling to create a page layout that has: a header which will expand to match its content, a footer that has a fixed height (which will never change) and a content section that fills the distance between the two that will scroll when necessary.
The difference between this and many other 3 row questions asked on SO is that I need the header to be fluid not fixed.
Here's an example of what I am after. It works perfectly in Chrome, however 40% of the target demographic use IE7 and this doesn't work in any version of IE.
It's worth viewing it as a full page.
html,
body,
form {
height: 100%;
margin: 0;
overflow: hidden;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.table .tr {
display: table-row;
}
.table .tr.header {
background: #ccc;
}
.table .tr.content {
height: 90%;
}
.table .tr.footer {
height: 50px;
background: #ccc;
}
.table .td {
display: table-cell;
}
.innerContent {
height: 100%;
background: #f0f0f0;
overflow: auto;
}
<div class="table">
<div class="tr header">
<div class="td">
<b>Header</b>
<br />expands to show all available content
<br />Other content
<br />Some more content
<br />Even more content
<br />Additional content
<br />Extended content
<br />Enhanced content
<br />Ya ya ya
</div>
</div>
<div class="tr content">
<div class="td">
<div class="innerContent">
<b>Content</b>
<br /> Will fill the remaining space and will scroll if necessary
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</div>
<div class="tr footer">
<div class="td">
<b>Footer</b>
<br/> Has fixed height and will never change.
</div>
</div>
</div>
Quirks
I can't use FlexBox because of IE7 although I would if there was a Polyfill available (I can't find one that supports IE7)
I can use HTML Tables (but would prefer not to).
I'm happy to use a JavaScript solution as long as its airtight, meaning if the content in the header changes the height, the content height needs to update as well; in fact, the version I am working with at the moment uses the following JavaScript to set the height of the content area:
function _makeContentScrollable() {
var $template = $(".table"),
$content = $template.children(".content");
$content.height(($(window).height()) - ($content.offset().top + $footer.outerHeight(true, true)));
}
This is re-called onresize but I'm unsure of the best way of calling this when the header height changes an example would be from an expanding/collapsing element in the header, short of calling a callback function on every script that might affect the height of the header which seems like a maintenance nightmare.
You don't need anything other than positioning. Check this out, which uses:
position: fixed
padding
This would give you a layout with fixed, scrolling (auto), fixed layout.
* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
body {padding: 70px 0 50px;}
p {margin: 10px 0 0;}
p:first-child {margin: 0;}
.header, .footer {
position: fixed;
left: 0; right: 0;
top: 0;
background-color: #ccc;
padding: 5px;
max-height: 70px;
overflow: hidden;
}
.footer {
top: auto;
bottom: 0;
text-align: center;
}
.content {
position: fixed;
top: 75px; bottom: 35px;
left: 0; right: 0;
overflow: auto;
}
<div class="header">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus consequuntur tenetur amet quisquam, fuga nobis eligendi perspiciatis saepe inventore nam nihil, ducimus id soluta accusantium iusto! Modi itaque vel laudantium.</div>
<div class="content">
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iure id culpa provident autem dolor, ea sit excepturi accusamus deleniti maxime repudiandae minima expedita eligendi, quam iste ullam cumque. Nesciunt!</span>
<span>Itaque dolorem repudiandae qui repellendus error non inventore possimus cum! Praesentium nobis laboriosam illum voluptas quidem reiciendis incidunt, rem? Sapiente nemo, quam officia eveniet maiores sint. Culpa, modi eveniet vel.</span>
<span>Asperiores non, facilis ratione placeat culpa, saepe dicta obcaecati, nesciunt blanditiis iste nostrum! Rem, suscipit. Nesciunt voluptas aliquam deleniti autem vitae repudiandae, hic, similique vel. Eius omnis ex voluptatum at?</span>
<span>Enim facilis rem dolore tempore numquam iste sapiente id molestias cupiditate accusamus laborum eius consequatur magnam sequi iusto obcaecati officiis, nostrum? A eum error praesentium, in eos aperiam voluptatibus pariatur?</span>
<span>Ipsam cumque, ab sunt explicabo dolores voluptates repellat aspernatur, molestiae, corporis, impedit blanditiis minus praesentium facilis deserunt alias sequi adipisci a. Numquam explicabo, odit fugiat reprehenderit fugit dolor aliquam nulla.</span>
<span>Qui libero accusamus, eveniet quo ducimus temporibus quia consectetur nulla, dolores obcaecati fuga officiis excepturi sed error esse architecto necessitatibus assumenda aliquam at quidem quae illo! Blanditiis doloribus voluptatum, facilis.</span>
<span>Ipsa inventore beatae quibusdam praesentium sunt omnis nesciunt eos incidunt accusantium adipisci, vitae dicta, perspiciatis repellendus, laudantium quam eius consequatur minus, illum reprehenderit. Tempora culpa officiis itaque veritatis vitae rem.</span>
<span>Temporibus debitis repudiandae molestias praesentium expedita a aperiam quia veniam sequi delectus, harum atque incidunt consequatur tenetur exercitationem dolor at mollitia ea ad! Laborum, provident. Illum iste nam cumque dicta!</span>
<span>Est commodi tempore quos nisi voluptatem aperiam totam laudantium vero autem quisquam explicabo labore sapiente, ea quas tenetur doloremque pariatur iure excepturi repellendus quia harum sint, perspiciatis! Saepe asperiores, labore.</span>
<span>At quidem cum iusto pariatur dolor dolorem autem, corporis ipsum libero ipsa possimus fugiat aperiam dicta labore beatae ducimus veniam, molestiae nemo, cumque. Veniam mollitia itaque, aliquam porro hic enim!</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere perspiciatis magni iusto porro, nam quis, vel architecto rerum provident adipisci eveniet delectus deserunt, beatae dolore! Maxime quibusdam non, suscipit perspiciatis.</span>
<span>Id dolorem assumenda, minus repudiandae velit facere atque quam sunt sapiente cum? Explicabo necessitatibus ipsam pariatur? Consequuntur exercitationem, sequi porro temporibus architecto a est, similique distinctio harum dicta libero accusantium.</span>
<span>Ipsa corrupti repellat quaerat ratione sapiente unde dolor mollitia possimus at, voluptates architecto aliquid suscipit, natus porro, iusto perferendis. Optio error, aspernatur. Quaerat hic nobis soluta suscipit eveniet dignissimos, pariatur.</span>
<span>Nemo aspernatur vitae non assumenda, similique sapiente totam porro laborum iste saepe facilis, reiciendis placeat impedit natus, itaque ipsam voluptatibus fugit ratione optio, sit iusto. Delectus ipsa officia voluptatem minima.</span>
<span>Sequi vero vel cupiditate porro ipsam, voluptates ad deleniti sunt magni ex adipisci dicta error amet eveniet cum facilis perferendis nemo cumque. Eveniet similique quaerat voluptas ex velit, labore molestiae.</span>
<span>Quibusdam iusto provident, neque amet, explicabo corrupti quia tempore voluptatibus dolorem dolorum sequi ex quidem tempora reprehenderit praesentium quod dignissimos. Laudantium, praesentium consequuntur. Dolore sequi, quos. Nobis blanditiis, porro aperiam?</span>
<span>Natus eius ex ullam nam magnam, facere cupiditate facilis animi soluta maiores reprehenderit illum rem quae, sit velit mollitia excepturi at dolorum explicabo. Ducimus animi, aliquid voluptas cupiditate quos odio!</span>
<span>Quo magni nostrum, asperiores delectus numquam qui cum impedit minus laborum explicabo, ab repellat aliquid nihil rem sunt praesentium, quaerat dolore quibusdam aut? Temporibus itaque perferendis cumque reprehenderit, quis recusandae?</span>
<span>Aspernatur quod at neque quaerat quidem architecto earum facere nisi, fuga vero deserunt eaque necessitatibus officiis, tenetur iste? Expedita maxime dolorem blanditiis sed exercitationem praesentium facere, commodi amet quis nemo.</span>
<span>Dolor atque laboriosam, provident tempora. Fugit delectus quidem modi cum voluptates, vel obcaecati iure reiciendis. Sit ad, sed tempora nobis atque consequuntur dolore ducimus voluptas. Sint animi mollitia cumque id.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum dolorem libero blanditiis nobis consequuntur corporis excepturi laudantium ea explicabo facilis dolores fugit, est, voluptatum adipisci incidunt magni! Iure obcaecati, facere.</span>
<span>Ducimus quidem voluptate voluptas est fuga consequatur pariatur, accusamus, deserunt quisquam excepturi. Culpa autem quia veritatis cupiditate soluta, quisquam, corporis assumenda, minus esse odit expedita consequatur aut laboriosam incidunt dolorem.</span>
<span>Ipsa aliquam eos velit repudiandae, porro ipsum aliquid et tenetur autem minus quisquam officia deleniti ut reprehenderit commodi natus quis, ab dolor repellat nostrum nobis eaque quo. Nulla, veritatis aspernatur.</span>
<span>Odit quisquam nam, facere obcaecati neque, eligendi dicta quos esse veniam quasi dolore vitae voluptatum autem corrupti iure vero ipsum unde, iusto ipsam at optio doloremque. Cumque necessitatibus, quisquam mollitia.</span>
<span>Provident culpa inventore rerum nemo itaque reiciendis, architecto adipisci laudantium, error, quidem labore omnis cupiditate aspernatur blanditiis magnam doloribus eveniet quasi. Similique incidunt eius, placeat laudantium ipsa blanditiis error libero.</span>
<span>Illum reiciendis exercitationem, cumque corrupti quibusdam fugit sit perferendis adipisci sunt eos ut placeat sequi excepturi esse porro veritatis recusandae non iste magnam unde ea ab aliquam natus, explicabo. Sapiente.</span>
<span>Fuga velit autem, nemo facilis enim earum nam voluptas omnis adipisci laudantium dignissimos, sint ad quibusdam minima ipsa quaerat consequatur officiis repellat ut ab, eius, voluptate quos assumenda! Maiores, necessitatibus!</span>
<span>Voluptatum amet deserunt saepe est maiores laborum, in quas deleniti hic iure animi debitis cum earum, qui possimus quisquam porro doloremque, sed eaque nemo aliquam labore dicta voluptatibus? Quibusdam, animi.</span>
<span>Nam dolorem non illo alias minus quis ratione eveniet nesciunt, tempora aperiam placeat fuga iure quidem quia sed iste voluptate consequatur, ducimus assumenda maiores impedit, saepe. Fuga perspiciatis unde eum?</span>
<span>Nesciunt sapiente, fugit deserunt, repellendus velit, possimus nobis doloremque rerum magni beatae dicta eos, quaerat nam labore. Cupiditate commodi necessitatibus ipsam laudantium dolores, nihil nam totam similique, neque provident accusantium.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt asperiores recusandae corrupti quod magnam ea ratione eveniet excepturi, temporibus dolorem labore, impedit illo, debitis. Assumenda harum, consequatur obcaecati reiciendis. Aspernatur!</span>
<span>Sequi inventore blanditiis, non exercitationem saepe explicabo sapiente mollitia nam tempore enim, optio! Aliquam quam, magnam voluptates et laborum excepturi autem nostrum explicabo dolores harum vero cum fuga nesciunt, cumque.</span>
<span>Fugit, eligendi optio veniam, quo enim ipsum minus neque natus, vero eaque, consequatur corporis nesciunt quis quod mollitia sapiente recusandae suscipit doloribus possimus. Alias reprehenderit quod perferendis architecto ipsa, consequatur.</span>
<span>Nihil architecto minima, inventore, officiis itaque alias odio quibusdam amet? Minus quae aliquam, maxime. Nam pariatur aut quis, distinctio est, itaque. Blanditiis laboriosam molestiae deleniti commodi vel praesentium aperiam consequatur?</span>
<span>Qui a dolorum dicta, nihil perspiciatis reprehenderit rem esse voluptas porro, quod beatae error excepturi quam tempora, illo. Similique minus, unde fuga! Earum nesciunt maiores cumque quisquam quam iste numquam!</span>
<span>Nisi accusamus, nesciunt vel explicabo veniam laudantium sit delectus debitis id numquam mollitia accusantium itaque sed. Voluptatum, nostrum laborum illo labore veritatis, minima nesciunt repellat, a neque maiores est magnam!</span>
<span>Aspernatur ab reprehenderit doloribus ut hic deleniti eaque veritatis. Consequuntur non mollitia blanditiis vitae illo in cum rem minus a dicta optio dolorum facilis vero, at vel beatae earum. Corporis?</span>
<span>Ad quos expedita officiis odio autem! Neque non doloremque voluptatum, laudantium cupiditate voluptas voluptate earum explicabo dolores, nam nobis distinctio ad, aliquid recusandae deleniti doloribus architecto illo molestiae laboriosam odio?</span>
<span>Soluta, minima expedita, dolorem explicabo enim alias amet nam, sunt neque dolor saepe rerum dignissimos hic itaque accusamus atque provident. Ut at eum deserunt aspernatur ullam expedita tempora, exercitationem nemo.</span>
<span>Voluptatem, quae, praesentium? Maxime veritatis earum, autem quia minus quae asperiores dolor quo veniam non tenetur vero officiis beatae magnam ipsum aliquam odit rerum illum architecto provident voluptate. Architecto, aperiam.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet molestiae quibusdam officiis, sapiente maiores id cupiditate libero autem saepe magnam, quo necessitatibus dolorum iure fugiat perspiciatis praesentium tempora dolore ad.</span>
<span>Omnis et perspiciatis blanditiis nulla, non ipsam impedit dolore molestias eos nesciunt nam pariatur delectus temporibus tenetur esse, corrupti voluptatum commodi debitis! Maxime, doloribus hic reprehenderit in iusto provident optio.</span>
<span>Cupiditate amet, consequuntur neque esse architecto dolorum distinctio. Tenetur sapiente tempore possimus libero nam suscipit in commodi vitae, id eligendi cupiditate expedita facilis accusamus praesentium, a vero ipsum repellat explicabo?</span>
<span>Vero fuga dignissimos officiis. Voluptatum error iste, nihil pariatur odio voluptatem molestiae, sit ipsum officiis ex, sed modi ut doloremque provident expedita accusantium earum quidem eveniet ratione ea aperiam. Molestias!</span>
<span>Sed earum consequuntur ut ea quod officiis animi, nemo expedita sint ullam magni impedit dicta minima debitis, quidem, repudiandae architecto dolorem delectus? Aspernatur porro tenetur, quae quasi iusto earum, id.</span>
<span>Voluptas dolore voluptates enim cum quasi dicta atque vitae aliquid omnis incidunt possimus quis molestiae, necessitatibus porro molestias, recusandae autem consectetur, officiis dignissimos in. Quas incidunt odio obcaecati quod aspernatur.</span>
<span>Dolorum, temporibus adipisci dignissimos quod, modi ipsam voluptates ipsa autem necessitatibus perferendis magni, veritatis repudiandae maxime veniam repellendus quo minima quibusdam porro illo neque delectus molestiae facere ab. Reiciendis, sapiente.</span>
<span>Facere quam qui expedita tenetur optio reprehenderit odit aliquid, officia corrupti vel commodi deserunt nesciunt recusandae beatae quas assumenda iusto ex, quibusdam. Doloremque similique, sit nulla nemo tempora voluptates eum?</span>
<span>Magnam voluptas eveniet qui voluptatum cupiditate, natus blanditiis ipsam consequuntur, ex quia, odit. Velit maxime sint repellat totam, sit, nobis in temporibus quia pariatur praesentium magni ipsa harum eveniet, laudantium.</span>
<span>Dolorum amet laudantium maiores, modi fugit, harum sint ratione ex ad nihil at velit quam numquam corrupti, esse dolor praesentium laboriosam explicabo. In, itaque, suscipit adipisci nihil ab facilis praesentium.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, autem ea nemo et provident, architecto minus deleniti laborum expedita earum omnis, voluptas officiis deserunt. Laudantium nesciunt fugit quae nulla reiciendis.</span>
<span>Officiis, vero magni aspernatur earum soluta qui animi optio nihil pariatur ad, molestiae possimus a omnis cum impedit ab atque ducimus, quas? Iste est alias voluptatem amet itaque assumenda obcaecati?</span>
<span>Reiciendis veniam laboriosam neque, vero odio nisi placeat vitae provident quia debitis omnis praesentium numquam dolores adipisci explicabo nihil recusandae, repudiandae velit esse expedita blanditiis! Rerum mollitia cum suscipit veniam!</span>
<span>Quaerat voluptatibus laborum, laudantium nisi dolorum officia id soluta cumque. Ex, voluptate doloremque placeat quo harum dignissimos architecto ipsam adipisci cum nisi repellendus quisquam ipsa dolorem odio aspernatur. Cum, distinctio.</span>
<span>Voluptates ut, quam earum non repellat sit aperiam facere id iste totam sint quidem nemo odit delectus ab culpa, sed voluptate ipsam quos commodi magnam. Ipsum quos reiciendis molestiae nesciunt.</span>
<span>Dolorum quis rerum architecto consectetur! Magni suscipit adipisci voluptates reiciendis eos et minus, inventore quod quisquam aliquid, molestiae, fuga nostrum ipsa! Velit debitis distinctio consectetur sed esse iste aspernatur, sit.</span>
<span>Dignissimos at, doloremque enim vero voluptatem mollitia fugit soluta corporis veniam similique sed temporibus deserunt quisquam eligendi, ducimus ut molestias sunt quibusdam. Perferendis officia, vero facere iste, libero voluptate numquam!</span>
<span>Repellat laboriosam eum magnam, nam explicabo assumenda fugit fugiat, cumque, laudantium a itaque repudiandae. Omnis, laudantium, expedita? Nisi iusto at aut, recusandae, non veniam harum tempora voluptates laboriosam sint laudantium.</span>
<span>Quasi quae rerum labore accusamus, optio est pariatur excepturi. Voluptatem tenetur fugit doloribus molestiae officiis fuga commodi voluptate, distinctio magni accusamus, labore sequi eligendi reprehenderit, id dicta ullam magnam ipsum.</span>
<span>Quidem dolor in reprehenderit, consectetur. Tempore consectetur provident aperiam ab ducimus obcaecati maiores illum voluptas ipsam beatae. Beatae porro magni, sint assumenda fugiat illum, consequuntur atque unde eligendi, quod id!</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsum illo, facere soluta, enim placeat repudiandae exercitationem sed numquam ratione maxime eligendi dignissimos, ex voluptatum eaque aperiam! Veritatis, pariatur, deleniti.</span>
<span>Pariatur nulla ducimus, labore saepe temporibus, doloremque, minima totam odit harum corporis omnis impedit quod iusto mollitia culpa aliquid aut laborum earum et magnam fugit vitae deserunt vel. Atque, dignissimos.</span>
<span>Fugiat accusamus aspernatur corrupti, porro? Reiciendis placeat cupiditate ea dolorem magnam eligendi molestias distinctio numquam consequuntur fuga ad, atque quaerat saepe beatae delectus explicabo laudantium suscipit porro sed corrupti accusantium.</span>
<span>Omnis dolor pariatur iure nulla quasi exercitationem eum obcaecati perferendis laudantium, alias voluptatem sunt, sapiente ducimus similique totam, architecto minus, culpa. Impedit, veritatis, vero. Error nesciunt nemo laudantium doloremque harum.</span>
<span>Tempora ipsum obcaecati, nemo, a exercitationem, modi commodi explicabo voluptates possimus in, suscipit corporis beatae ad alias veniam culpa ipsa? Optio, quas, enim! Omnis, non, reprehenderit est illum numquam doloribus!</span>
<span>Impedit reiciendis quia perferendis, odit natus unde qui explicabo laudantium ipsam dolorem eligendi veritatis. Neque, sapiente mollitia consectetur tenetur delectus repellendus nihil quae magnam suscipit amet voluptatibus itaque, magni possimus!</span>
<span>Perferendis impedit voluptas aliquid reiciendis, ipsam rem consectetur suscipit corrupti tenetur. Ducimus saepe, quibusdam debitis hic veniam aliquid laborum cumque rerum minima magnam itaque, quod, excepturi blanditiis illo officia aliquam?</span>
<span>Cupiditate quasi aut adipisci at sed eaque quo, nulla aperiam labore rem ducimus illum ut quaerat nemo earum fugit accusantium, doloribus soluta molestiae sequi, odit quis quam sapiente voluptates nostrum!</span>
<span>Impedit pariatur ab quod hic rem illo voluptatibus, ipsum ipsam ut magnam quasi amet quae ipsa quo maiores est suscipit non sint delectus inventore. Autem, quibusdam, odit! Odio, dolorum, quo.</span>
<span>Qui ipsum ipsa sit laudantium commodi eligendi itaque, beatae tempora tempore. Porro expedita nisi minus eaque magni, culpa quibusdam. Doloremque dolorum cupiditate hic! Voluptatem esse hic error sit ab nihil.</span>
</p>
</div>
<div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit!</div>
Updated according to comments.
Update: For dynamic height, you could consider using this JavaScript (jQuery) code:
$(function () {
var resizeWin = function () {
$(".content").css("top", $(".header").outerHeight());
};
resizeWin();
$(window).resize(resizeWin);
});
JSBin: http://output.jsbin.com/wikeketequ