Add class on scroll on bootstrap 4 nav - javascript

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


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


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

Related

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

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

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

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

How to make the scroll button appear and disappear [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I already have a button that smoothly scrolls up. But I need it to disappear when there is no scroll and appear when there is a scroll without jquery.
.scrollup {
width: 40px;
height: 40px;
position: fixed;
bottom: 2rem;
right: 2rem;
text-indent: -9999px;
background-image: url(https://i.stack.imgur.com/nkNki.png);
}
.scrollup:hover {
cursor: pointer;
}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi recusandae minima corrupti possimus maiores quaerat eveniet, odit, aut rem asperiores adipisci! Culpa minima facere voluptatibus eveniet, ex nisi veniam accusamus vitae modi rerum provident repudiandae, architecto doloribus a nihil. Architecto itaque laboriosam rem dignissimos accusantium eum? Nostrum, eius nam est, labore dolores veritatis qui vel fugiat a minus incidunt debitis ipsum aliquam odio reiciendis architecto ducimus pariatur voluptate ipsam iure obcaecati sunt. Repellat necessitatibus doloremque eaque delectus soluta quis nemo rem minus sunt a. Esse dolorem doloremque accusamus repellat unde quos quod non tempora repellendus neque eum sequi laborum a praesentium aperiam perferendis totam, ipsum hic sint veniam? Pariatur veritatis unde sapiente, consectetur, velit veniam ab blanditiis voluptatibus voluptatum quasi iusto! Porro, dolores eaque itaque impedit in iste pariatur! Dolores quis enim veritatis eos? Delectus et aliquid voluptate quos accusantium doloremque, temporibus harum porro eos possimus architecto amet doloribus eius illum omnis expedita, nesciunt, consequatur rem voluptatibus incidunt cupiditate molestiae tenetur. Earum iusto beatae officiis corporis, quas eum natus dolorem veniam aspernatur ratione sunt repudiandae, porro ex eligendi obcaecati alias non reiciendis numquam facere vitae perspiciatis! Iste nisi quia ut, inventore vel excepturi labore omnis, beatae reiciendis aut earum amet in totam est, iure officia odio quo quas provident accusamus laudantium nihil repellat? Molestiae eos natus sint voluptatibus porro nam nulla dolore consequatur exercitationem! Quidem ad rem cumque aperiam, aut accusamus minima aspernatur expedita, corrupti quaerat neque at nemo quo tenetur suscipit eius necessitatibus iste vitae repellendus sint illo natus culpa? Et culpa voluptatem alias dignissimos maiores a exercitationem sequi eveniet odio illo ab sed quis, fugit repudiandae architecto aliquid similique corrupti fugiat sit rem itaque molestiae. Non quia numquam, aliquam ducimus illum inventore quaerat voluptates repellendus eius, iusto, hic optio maxime magni nisi possimus perferendis minima deserunt exercitationem qui rem iste. Vero sapiente assumenda saepe temporibus iusto! Eligendi veniam dolorem odio, velit hic nisi ut saepe maxime nobis nesciunt sed, reprehenderit repudiandae dolorum beatae quod. Quisquam porro saepe deleniti et architecto, ipsam sit debitis aspernatur unde possimus recusandae vel numquam eaque perferendis eos eveniet inventore tenetur quo harum cumque. Amet corporis illum, natus obcaecati ad minus ab alias soluta deserunt dicta corrupti excepturi, exercitationem vel repellat quasi autem commodi, similique modi impedit sed nam dolor quas! Ipsa mollitia deleniti consequatur sed, cupiditate nam, optio necessitatibus fugiat incidunt velit facere veniam pariatur quis, officia delectus rem corporis at labore? Veniam tenetur dolorum quibusdam nemo dicta commodi voluptate ad sunt omnis nisi tempora officiis magni, accusamus in culpa a temporibus eaque fuga voluptas aut, quas ex rerum autem. Impedit libero sequi quae facere porro fugiat tempora ipsum reprehenderit alias dignissimos adipisci quod exercitationem maiores deserunt quos dolorem, possimus amet necessitatibus praesentium ipsam quam nihil? Libero nemo soluta delectus labore numquam nulla placeat molestias, atque veniam hic minima iste illo saepe consequuntur harum, reprehenderit modi fuga, laudantium rerum consequatur voluptatum. Beatae veritatis adipisci veniam sint? Laborum beatae sint qui natus reiciendis quo aperiam dolorem, doloremque inventore, obcaecati animi facere. Autem provident aut pariatur eveniet aliquam dicta nobis facilis quam facere molestias totam repellat illum placeat similique saepe, doloremque cum quia. Deleniti facilis minus aperiam in modi, placeat quo similique consequatur quisquam alias necessitatibus porro, totam quibusdam at! Dignissimos corporis eos, voluptatibus eaque nobis laborum quia aperiam impedit! Corrupti hic odit eum? Itaque, maxime eos. Debitis eius ea praesentium, aliquam repellat libero pariatur similique consectetur quas est deserunt! Dicta laboriosam praesentium dolores? Minima quo magni, minus debitis sit quod hic ullam eveniet nobis ut error facilis veniam explicabo iure aliquam adipisci fugiat. Aperiam voluptatem incidunt cupiditate explicabo reiciendis aliquid nihil quaerat laboriosam illum, repellendus odit in corporis iusto quibusdam autem facilis tenetur nam qui est reprehenderit? Earum alias sint eaque deleniti, ut inventore error praesentium facilis dolorem molestiae voluptas veritatis cum, repudiandae sequi fuga ipsum incidunt a, ex architecto aspernatur unde? Consequatur, error soluta facere corrupti vel rerum possimus enim dolorum consectetur qui eius neque debitis ipsum tempora, accusamus magnam praesentium perspiciatis, quos necessitatibus? Quam fugiat rerum ullam quisquam ipsum nobis numquam illo porro saepe sed repellat hic obcaecati, velit laborum quos maiores repudiandae odit dignissimos debitis ab aliquid dicta neque veniam? Tempora fugit temporibus veniam modi sed esse ab alias nemo possimus, dolores a suscipit repellat repellendus earum aperiam assumenda eligendi fuga! Error natus, magnam, et magni commodi nulla officiis voluptatum voluptas facere, deleniti incidunt ipsum vitae eum ducimus culpa qui quod harum sapiente corporis accusantium? Exercitationem corporis in ab quas sed error consequuntur consectetur officiis quasi unde, debitis excepturi temporibus voluptatibus labore dolore aspernatur ut dignissimos. Culpa fugit repudiandae corporis sapiente! Repellendus voluptas tenetur vitae quos omnis odit ipsam culpa! Sunt quis suscipit aliquam corporis non doloremque. Voluptatem qui, vero ullam voluptatibus, quam, vitae molestias odio sunt harum accusamus unde ducimus aut culpa distinctio iusto odit? Deserunt, omnis eligendi? Quaerat officia minima quam quos voluptatibus sequi quod consequuntur distinctio? Placeat architecto soluta quibusdam quod natus necessitatibus deserunt atque possimus labore? Quisquam molestias vitae quis repellendus sequi ipsa necessitatibus dignissimos facere maxime totam cumque, earum, possimus et eum aspernatur aperiam! Eligendi quas quis quo quibusdam. Repudiandae ipsa consequuntur aut explicabo fugiat deserunt. Velit aliquam quia accusamus modi ut? Reiciendis est consequatur ipsam atque voluptas, doloremque repudiandae! Fuga voluptates ratione, iure quaerat excepturi perferendis fugit veniam aspernatur, vitae ipsam dolor ut facere voluptatem dolorum deleniti perspiciatis quae debitis rem temporibus nemo voluptatum quis nesciunt corporis sequi! Aliquid ullam ratione odio similique provident. Voluptate soluta laboriosam ab eum et. Voluptate eum excepturi deserunt rem sunt est dicta qui officia praesentium vitae fuga neque assumenda hic saepe alias amet, distinctio aperiam? Fugiat id distinctio saepe esse tempore neque incidunt iure nihil deleniti, soluta laudantium, recusandae voluptatem deserunt tempora ullam architecto sit, explicabo praesentium autem labore ipsum itaque natus! Alias, ipsa? Saepe expedita sint molestiae temporibus odit reprehenderit praesentium, exercitationem architecto suscipit porro libero laborum aut alias rem. A dolore suscipit illo sunt mollitia molestias ad inventore reiciendis provident at minus, laborum odit necessitatibus ab numquam reprehenderit quaerat ducimus voluptatum accusantium nihil officia libero culpa. Magni!</p>
<a onclick="window.scroll({ top: 0,left: 0,behavior: 'smooth' });" class="scrollup">Top</a>

Using scrollTop and onscroll function, you can solve it easily. Try once.
mainDiv. scrollTop returns how many pixels vertically scrolled.Disable or enable button onscroll event listener based on scrollTop

i have done this work recently, and i create this function. i hope it help you
function showBtnToTop(){
if(window.innerWidth > 767){// 768 medium screen width
if (window.scrollY >= x){ // x is a number, and it is the position when the button disappear
$('#gotop').css("opacity", "100");// gotop is the id of the button
}else{
$('#gotop').css("opacity", "0");
}
}else{ // don't show the button in small screen
$('#gotop').css("opacity", "0");
}
}
window.addEventListener("scroll", showBtnToTop);
use this JS function to selcet the btn
let a = document.getElementById("");
and change the css property like this:
a.style.color = "blue";

Vue & Nuxt Js : why Cannot create property 'display' on string 'bottom:30px;right:30px;'?

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

How to make the rotateblock not go beyond the section?

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>

Disable sidebar scroll, if gemini scrollbar

1. Summary
If I use gemini-scrollbar instead of native scrollbar, I can't make, that my sidebar don't scroll.
2. Data
my sidebar in aside tag,
content of my article in main tag.
My minimal example code (see also in Codepen):
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js" defer></script>
<script>
window.onload = function() {
var scrollbar = new GeminiScrollbar({
element: document.querySelector("body"),
autoshow: true,
forceGemini: true,
}).create();
};
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gemini-scrollbar/gemini-scrollbar.css">
<style>
html,
body {
height: 100%;
/*overflow: hidden;*/
}
body {
margin: 0;
padding: 0;
}
aside {
background-size: cover;
height: 100%;
background-image: url("https://kristinita.ru/theme/images/aside/SashaGreenSweater.jpg");
float: left;
}
#media screen and (orientation: portrait) {
aside {
width: 100%;
}
}
#media screen and (orientation: landscape) {
aside {
width: 35%;
position: fixed;
}
main {
width: 65%;
float: right;
}
}
</style>
</head>
<body>
<aside>
</aside>
<main>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente officia ipsum ut harum voluptates, esse unde nam nobis minus nemo cumque, rerum odit aliquam vitae dicta, aliquid eveniet veritatis totam.</div>
<div>Magnam eos esse reprehenderit saepe, natus, placeat quas alias eum facilis, unde explicabo velit eaque dicta nostrum recusandae iste culpa. Quidem nisi architecto ratione atque recusandae ea sequi adipisci incidunt.</div>
<div>Recusandae pariatur ex, a quisquam! Aperiam blanditiis quisquam, officia aut vel, minima laboriosam quam, cumque in maiores enim id unde, deserunt numquam! Vel eligendi qui sunt reprehenderit hic, numquam dolorum.</div>
<div>Sunt quas iste autem accusantium, illo non praesentium quam accusamus impedit repudiandae voluptate harum maiores tenetur dolorem corrupti dolore magnam, a. Magni error eligendi reiciendis repudiandae quod autem nesciunt magnam.</div>
<div>Ullam assumenda velit ad amet totam nemo molestiae expedita temporibus, aliquam. Unde maxime, totam laborum eligendi minima consequatur, sequi voluptate cumque eveniet, beatae libero eius quis omnis ut, repellendus porro.</div>
<div>Cumque nostrum natus omnis temporibus minima unde, similique explicabo provident possimus assumenda molestiae aperiam accusantium odio, non, beatae saepe magnam fugit. Fuga incidunt quae id quisquam expedita sequi, nesciunt ullam.</div>
<div>Temporibus commodi a numquam soluta tempore, facilis voluptate. Dolore ut, harum, aperiam maxime distinctio quisquam aliquid officiis, laudantium voluptates repudiandae eveniet voluptas laborum debitis autem rem earum soluta temporibus iste!</div>
<div>Sed quia excepturi dolorem dolores. Quaerat nisi blanditiis sequi atque deleniti eligendi aliquam ad ipsam culpa natus, impedit numquam dolor maiores quisquam repellat officia voluptate omnis ex doloremque sed sint!</div>
<div>Tenetur consequatur eligendi excepturi nihil, deleniti aliquam. Ut aliquam, laudantium, nostrum necessitatibus, maiores ad neque praesentium illo enim atque repellat amet totam vero cumque aut nemo pariatur perspiciatis iusto id.</div>
<div>Fuga optio eligendi quaerat facere sint nesciunt corrupti necessitatibus! Ea impedit, quasi veniam hic recusandae ipsum incidunt vitae cum, voluptates modi repellat provident beatae quo doloremque rerum illo. Esse, consectetur.</div>
<div>Sunt beatae ex ab, cum dignissimos, eligendi doloribus provident! Adipisci itaque voluptate numquam est quae nisi ut dolor repudiandae modi tempora doloribus reiciendis corporis, blanditiis sed dolore ratione! Voluptatum, placeat.</div>
<div>Natus nobis nisi alias, facilis quae porro. Error doloremque quidem harum obcaecati quasi animi molestiae itaque accusamus, et eligendi. Sapiente quisquam mollitia fugiat quos voluptatibus assumenda. Consectetur ratione, officiis eos.</div>
<div>Commodi obcaecati, nemo. Repellendus voluptatem, voluptatibus vero, assumenda molestias dolorem maiores dolore delectus odit magnam numquam corrupti possimus quibusdam error quae repudiandae in est quod tempora accusantium odio hic quaerat.</div>
<div>Ea eligendi, dolor nostrum necessitatibus porro hic qui repellat soluta veniam similique, ab quae vero, ipsam obcaecati error accusamus. Fugiat temporibus sed magnam repudiandae totam nam minus obcaecati enim, voluptatibus!</div>
<div>Autem dignissimos voluptatem velit molestias recusandae id minima, provident accusantium consequatur, aut temporibus corrupti quaerat quasi quis adipisci numquam minus in rerum dolorum, optio delectus atque ex aspernatur perspiciatis expedita.</div>
<div>Repellat aspernatur sequi, ad veniam veritatis rerum necessitatibus hic voluptatibus delectus dolore eaque quasi in quaerat deserunt, sunt. Recusandae praesentium quibusdam nihil sapiente magni eum iusto iste esse ex a!</div>
<div>Obcaecati omnis adipisci laboriosam temporibus, delectus enim debitis earum voluptatibus, culpa impedit quia et eaque nesciunt. Quos, incidunt debitis. Veniam quaerat nihil maxime numquam eaque beatae delectus, quo ex harum.</div>
<div>Enim illum non, accusantium quas sed quisquam minus aut illo, expedita voluptatum? Odio iure sequi, maiores repellendus quasi ratione distinctio consequatur quaerat perferendis. Iusto eum tempora nostrum necessitatibus, reiciendis aperiam.</div>
<div>Beatae doloribus, officia repellat illo provident temporibus numquam accusamus. Excepturi, tempora unde alias officiis architecto ex odio voluptatum autem adipisci, voluptas sed quos, praesentium pariatur quia tenetur sequi veniam fuga!</div>
<div>Harum quibusdam sequi repudiandae culpa voluptas reprehenderit quod eaque earum odio. Earum vitae non reprehenderit incidunt, eveniet error eum nihil iure sapiente cum, nesciunt, fuga accusamus nulla natus. Obcaecati, quaerat.</div>
<div>Autem dicta recusandae, esse saepe? Expedita consectetur ipsa vitae at esse provident, accusantium molestias, labore, neque totam ullam blanditiis autem perspiciatis minima deleniti iure veniam! Numquam veritatis saepe molestias tempora.</div>
<div>Nesciunt esse similique unde laudantium deleniti. Debitis dignissimos magni exercitationem nulla eius pariatur ducimus minima reiciendis! Eligendi saepe aspernatur laudantium necessitatibus ipsam sed, maxime a. Inventore velit itaque, obcaecati magni.</div>
<div>Repudiandae nam dolores perspiciatis totam minus incidunt, error nihil itaque facere alias, perferendis sit vel! Culpa delectus, maiores assumenda accusamus amet maxime dolores, rerum! Accusantium ipsum distinctio numquam aperiam dolore.</div>
<div>Officiis tempore quae sint iste facere corporis eius ea quos sapiente, et, quo dolore repellat commodi magni quam reprehenderit quisquam perspiciatis nihil ducimus nisi maiores necessitatibus. Non minus, fugiat tempore.</div>
<div>Aspernatur maxime veniam reiciendis quo animi perspiciatis magnam, quidem quos itaque consectetur ratione eius. A, repudiandae consequatur quam doloribus suscipit harum, commodi numquam, in fugit et nostrum quo sunt ex!</div>
</main>
</body>
</html>
3. Expected behavior
If I use native browser scrollbar, position: fixed help me:
4. Actual behavior
If I use gemini-scrollbar, aside scroll with main:
5. Not helped
For example:
5.1. Theia Sticky Sidebar
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/resize-sensor/ResizeSensor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/theia-sticky-sidebar/dist/theia-sticky-sidebar.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('main, aside').theiaStickySidebar({
additionalMarginTop: 0
});
});
</script>
Result.
5.2. Sticky sidebar
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sticky-sidebar/dist/jquery.sticky-sidebar.min.js"></script>
<script>
$('aside').stickySidebar({
topSpacing: 60,
bottomSpacing: 60
});
</script>
Result.
6. Do not offer
Please, do not offer:
6.1. “Don't use gemini-scrollbar”
I don't know another custom scrollbar, that:
replace native body scrollbar,
works without critical bugs,
open source,
active maintained.
6.2. “Use document.querySelector("main") instead of document.querySelector("body")”
I have some problems in my site, if document.querySelector("main") in landscape orientation.
For example, user open anchor of any page of my real site → user resize screen from landscape to portrait or conversely → scrollbar move to begin of my page. I don't know, how I can fix this bug.

1. Summary
As answered plugin owner, I need to add:
.gm-scrollbar-container .gm-scroll-view {
transform: initial;
}
2. Demonstration
Codepen:
Sources
Demo page
Stack Overflow:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js" defer></script>
<script>
window.onload = function() {
var scrollbar = new GeminiScrollbar({
element: document.querySelector("body"),
autoshow: true,
forceGemini: true,
}).create();
};
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gemini-scrollbar/gemini-scrollbar.css">
<style>
html,
body {
height: 100%;
/*overflow: hidden;*/
}
body {
margin: 0;
padding: 0;
}
aside {
background-size: cover;
height: 100%;
background-image: url("https://kristinita.ru/theme/images/aside/SashaGreenSweater.jpg");
float: left;
}
#media screen and (orientation: portrait) {
aside {
width: 100%;
}
}
#media screen and (orientation: landscape) {
aside {
width: 35%;
position: fixed;
}
main {
width: 65%;
float: right;
}
}
.gm-scrollbar-container .gm-scroll-view {
transform: initial;
}
</style>
</head>
<body>
<aside>
</aside>
<!-- Content -->
<main>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente officia ipsum ut harum voluptates, esse unde nam nobis minus nemo cumque, rerum odit aliquam vitae dicta, aliquid eveniet veritatis totam.</div>
<div>Magnam eos esse reprehenderit saepe, natus, placeat quas alias eum facilis, unde explicabo velit eaque dicta nostrum recusandae iste culpa. Quidem nisi architecto ratione atque recusandae ea sequi adipisci incidunt.</div>
<div>Recusandae pariatur ex, a quisquam! Aperiam blanditiis quisquam, officia aut vel, minima laboriosam quam, cumque in maiores enim id unde, deserunt numquam! Vel eligendi qui sunt reprehenderit hic, numquam dolorum.</div>
<div>Sunt quas iste autem accusantium, illo non praesentium quam accusamus impedit repudiandae voluptate harum maiores tenetur dolorem corrupti dolore magnam, a. Magni error eligendi reiciendis repudiandae quod autem nesciunt magnam.</div>
<div>Ullam assumenda velit ad amet totam nemo molestiae expedita temporibus, aliquam. Unde maxime, totam laborum eligendi minima consequatur, sequi voluptate cumque eveniet, beatae libero eius quis omnis ut, repellendus porro.</div>
<div>Cumque nostrum natus omnis temporibus minima unde, similique explicabo provident possimus assumenda molestiae aperiam accusantium odio, non, beatae saepe magnam fugit. Fuga incidunt quae id quisquam expedita sequi, nesciunt ullam.</div>
<div>Temporibus commodi a numquam soluta tempore, facilis voluptate. Dolore ut, harum, aperiam maxime distinctio quisquam aliquid officiis, laudantium voluptates repudiandae eveniet voluptas laborum debitis autem rem earum soluta temporibus iste!</div>
<div>Sed quia excepturi dolorem dolores. Quaerat nisi blanditiis sequi atque deleniti eligendi aliquam ad ipsam culpa natus, impedit numquam dolor maiores quisquam repellat officia voluptate omnis ex doloremque sed sint!</div>
<div>Tenetur consequatur eligendi excepturi nihil, deleniti aliquam. Ut aliquam, laudantium, nostrum necessitatibus, maiores ad neque praesentium illo enim atque repellat amet totam vero cumque aut nemo pariatur perspiciatis iusto id.</div>
<div>Fuga optio eligendi quaerat facere sint nesciunt corrupti necessitatibus! Ea impedit, quasi veniam hic recusandae ipsum incidunt vitae cum, voluptates modi repellat provident beatae quo doloremque rerum illo. Esse, consectetur.</div>
<div>Sunt beatae ex ab, cum dignissimos, eligendi doloribus provident! Adipisci itaque voluptate numquam est quae nisi ut dolor repudiandae modi tempora doloribus reiciendis corporis, blanditiis sed dolore ratione! Voluptatum, placeat.</div>
<div>Natus nobis nisi alias, facilis quae porro. Error doloremque quidem harum obcaecati quasi animi molestiae itaque accusamus, et eligendi. Sapiente quisquam mollitia fugiat quos voluptatibus assumenda. Consectetur ratione, officiis eos.</div>
<div>Commodi obcaecati, nemo. Repellendus voluptatem, voluptatibus vero, assumenda molestias dolorem maiores dolore delectus odit magnam numquam corrupti possimus quibusdam error quae repudiandae in est quod tempora accusantium odio hic quaerat.</div>
<div>Ea eligendi, dolor nostrum necessitatibus porro hic qui repellat soluta veniam similique, ab quae vero, ipsam obcaecati error accusamus. Fugiat temporibus sed magnam repudiandae totam nam minus obcaecati enim, voluptatibus!</div>
<div>Autem dignissimos voluptatem velit molestias recusandae id minima, provident accusantium consequatur, aut temporibus corrupti quaerat quasi quis adipisci numquam minus in rerum dolorum, optio delectus atque ex aspernatur perspiciatis expedita.</div>
<div>Repellat aspernatur sequi, ad veniam veritatis rerum necessitatibus hic voluptatibus delectus dolore eaque quasi in quaerat deserunt, sunt. Recusandae praesentium quibusdam nihil sapiente magni eum iusto iste esse ex a!</div>
<div>Obcaecati omnis adipisci laboriosam temporibus, delectus enim debitis earum voluptatibus, culpa impedit quia et eaque nesciunt. Quos, incidunt debitis. Veniam quaerat nihil maxime numquam eaque beatae delectus, quo ex harum.</div>
<div>Enim illum non, accusantium quas sed quisquam minus aut illo, expedita voluptatum? Odio iure sequi, maiores repellendus quasi ratione distinctio consequatur quaerat perferendis. Iusto eum tempora nostrum necessitatibus, reiciendis aperiam.</div>
<div>Beatae doloribus, officia repellat illo provident temporibus numquam accusamus. Excepturi, tempora unde alias officiis architecto ex odio voluptatum autem adipisci, voluptas sed quos, praesentium pariatur quia tenetur sequi veniam fuga!</div>
<div>Harum quibusdam sequi repudiandae culpa voluptas reprehenderit quod eaque earum odio. Earum vitae non reprehenderit incidunt, eveniet error eum nihil iure sapiente cum, nesciunt, fuga accusamus nulla natus. Obcaecati, quaerat.</div>
<div>Autem dicta recusandae, esse saepe? Expedita consectetur ipsa vitae at esse provident, accusantium molestias, labore, neque totam ullam blanditiis autem perspiciatis minima deleniti iure veniam! Numquam veritatis saepe molestias tempora.</div>
<div>Nesciunt esse similique unde laudantium deleniti. Debitis dignissimos magni exercitationem nulla eius pariatur ducimus minima reiciendis! Eligendi saepe aspernatur laudantium necessitatibus ipsam sed, maxime a. Inventore velit itaque, obcaecati magni.</div>
<div>Repudiandae nam dolores perspiciatis totam minus incidunt, error nihil itaque facere alias, perferendis sit vel! Culpa delectus, maiores assumenda accusamus amet maxime dolores, rerum! Accusantium ipsum distinctio numquam aperiam dolore.</div>
<div>Officiis tempore quae sint iste facere corporis eius ea quos sapiente, et, quo dolore repellat commodi magni quam reprehenderit quisquam perspiciatis nihil ducimus nisi maiores necessitatibus. Non minus, fugiat tempore.</div>
<div>Aspernatur maxime veniam reiciendis quo animi perspiciatis magnam, quidem quos itaque consectetur ratione eius. A, repudiandae consequatur quam doloribus suscipit harum, commodi numquam, in fugit et nostrum quo sunt ex!</div>
</main>
</body>
</html>
3. Explanation
transform property in gemini-scrollbar.css: 1, 2.
transform create a new local coordinate system.
The initial keyword is used to set a CSS property to its default value.
4. Additional links
CSS initial Keyword
CSS transform Property

Categories