I want the scrollbar to be behind the top fixed navbar in my website.
I have seen a similar thing in the following website (obsidian.md) where the scrollbar goes behind the navbar with class "app-header", but I can't figure out how they did it.
Below is the screenshot from above website (obsidian.md)
Note: I removed the backdrop-filter: blur(5px) style on header to make it visible screenshot:
You can't actually move the browser(<body>
) scrollbar behind the navbar. But, you can move any html element's (like a <div>
or <main>
) scrollbar behind the navbar.
body {
overflow: hidden;
}
<body>
<nav>
<!-- Add navbar links here -->
</nav>
<div class="wrapper">
<!-- Add all of your content here -->
</div>
</body>
.wrapper {
height: 100vh;
overflow-y: auto; /* OR scroll */
}
nav {
position: fixed;
width: 100%;
}
You can check out this pen or see the demo here.
body {
margin: 0;
background-color: #223;
overflow: hidden;
font-family: sans-serif;
}
nav {
display: flex;
justify-content: space-between;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
position: fixed;
width: 100%;
padding: 2em;
}
h2 {
margin: 0;
}
.links {
margin-right: 4em;
}
a {
text-decoration: none;
color: #fff;
margin-left: 1em;
}
a:hover {
opacity: 0.7;
}
main {
color: #ccc;
padding: 1em;
padding-top: 12em;
height: 100vh;
overflow-y: auto;
}
.content {
max-width: 900px;
margin: auto;
}
<nav>
<h2>Lorem</h2>
<div class="links">
<a href="#">Ipsum</a>
<a href="#">Iure</a>
<a href="#">Vel</a>
<a href="#">Atque</a>
</div>
</nav>
<main>
<div class="content">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium obcaecati odit reprehenderit deleniti consequatur tempore illo molestias et nesciunt repellat delectus non nemo deserunt ab laboriosam facere maxime fugiat numquam suscipit, dignissimos
ipsa dolor voluptatum cumque consectetur? Quibusdam reprehenderit amet fugit qui sunt. Error perspiciatis cupiditate quisquam, veritatis cum, hic corrupti nisi deleniti impedit fugit modi ipsum? Sit magni nam accusamus deleniti non, sunt ipsa aliquam
dolorum corrupti maxime cumque optio ad doloremque itaque placeat quos laborum consequuntur nisi numquam eos perferendis voluptatum repellat. Fuga commodi corrupti quasi numquam aliquam ab exercitationem odio, id, animi, similique perferendis! Itaque
doloremque quos tenetur nostrum ea magni quibusdam sunt neque ipsa. Dolore placeat, ad minima voluptas natus sed aut sequi. Esse id aperiam, amet repudiandae consequatur dolor ipsam blanditiis qui provident, quidem tempore! Eveniet asperiores autem
repellendus blanditiis aut delectus veniam cum illo in dolor? Deserunt facilis magnam sint cupiditate. Ratione totam, obcaecati quod eius ab magni eos fuga hic? Maxime eius porro cupiditate hic laudantium fugit a, odit nobis, consequuntur dignissimos
deserunt impedit nemo, facere aspernatur vitae! Enim, quam molestiae voluptas excepturi error maiores aliquid quisquam libero hic dignissimos, optio obcaecati ipsam reiciendis dolores accusamus incidunt earum. Cumque, nemo vel fuga dolor atque necessitatibus
reprehenderit harum quae animi cupiditate mollitia consectetur, unde ullam deserunt sunt nulla. Quas inventore harum ducimus nam sequi doloremque culpa recusandae iusto enim accusantium. Ullam quam quidem animi cupiditate, repellat accusantium voluptatem
amet rem, ipsam ipsum adipisci sequi ab delectus blanditiis omnis! Et, repudiandae dolore. Ducimus vero nihil sed, eos impedit quasi adipisci, ad optio molestiae ullam ratione earum distinctio possimus. Porro soluta libero rem minima nisi voluptates
quo reprehenderit quibusdam ratione minus odio obcaecati beatae, ipsa aut, consequatur cupiditate esse. Corrupti, quasi hic! Eius, aspernatur ad porro velit dolore officia alias repellendus esse magnam suscipit maxime quo sequi laborum commodi quasi
quisquam sed voluptatem eveniet exercitationem, quaerat eum molestias assumenda illo perferendis. Nobis, suscipit. Libero, sequi est autem praesentium corporis cumque culpa recusandae et maiores, placeat hic nemo nam incidunt unde suscipit obcaecati
architecto, at pariatur ab atque. A culpa nulla eveniet maxime, ex officia facilis iusto ratione dignissimos minima corporis, illum temporibus, deleniti veritatis natus illo sed atque eius est ipsam voluptates! Iure reprehenderit in aliquid cumque?
Assumenda dignissimos deserunt, iure, natus reprehenderit mollitia blanditiis ea voluptatibus praesentium asperiores reiciendis eum autem, unde laudantium inventore esse eius deleniti vitae quo excepturi vel? Molestiae minima enim vero quia officiis
dolorem corrupti aliquam quo fugit sit. Dignissimos consectetur iure magni sunt laudantium et praesentium, ut fuga, facere maxime ad eaque placeat veniam quasi neque ipsam nulla sint vero beatae at vitae. Deserunt veniam aspernatur consequuntur! Voluptatibus,
fugit quas? Quo mollitia dicta nemo ea eaque magnam laborum quibusdam officiis illum delectus tempora in dolores sunt consequatur sapiente quam provident ab quasi voluptatem, a excepturi ex architecto fuga commodi? Rem magni repellat illo dolorum.
Illum, ex? Iste eligendi nulla eius enim aliquid hic nihil architecto velit similique magni esse laborum suscipit, atque adipisci sed officiis quod dolorum blanditiis autem recusandae! Cupiditate ab eius minima ipsum obcaecati ex quae ratione modi,
quaerat sapiente facilis labore eum aspernatur tempora quasi totam, esse expedita nostrum ducimus maiores eos corrupti reiciendis deleniti? Fugiat neque accusantium consequatur, eveniet temporibus aperiam quasi dolor vitae beatae ipsum voluptates
voluptate, explicabo similique facilis esse exercitationem, possimus porro asperiores dolores eum quos odio placeat alias ullam. Nemo molestias eveniet omnis? Vel, blanditiis accusamus quas molestias minima optio quo odio velit non ipsa dolores. Tempora
fugit error magnam omnis natus commodi voluptas, explicabo amet excepturi sunt architecto. Eligendi blanditiis fugiat nesciunt nemo. Ducimus, quia. Dolore neque temporibus quis sequi cum, eaque quibusdam. Vero odio temporibus fugit autem. Eos, modi
suscipit rem qui perferendis hic blanditiis quo laudantium exercitationem sunt ut quis voluptate doloremque odit rerum ipsam eum inventore repellendus quam officia provident nam iure iusto? Ad, aperiam! Alias totam officia architecto quia vero velit
neque earum, culpa hic modi quis, nobis dignissimos sequi accusamus. Aliquam, suscipit maiores reprehenderit debitis saepe id nostrum sit expedita culpa provident sequi, placeat dolor nihil ut rem vero, atque facere iure dolore nisi! Quo ea deleniti
totam, debitis velit, beatae reprehenderit quas tempore facilis hic, repellendus placeat praesentium voluptas assumenda recusandae reiciendis asperiores consequatur deserunt culpa. Tempore, minima veritatis voluptate laudantium in asperiores qui necessitatibus?
Laboriosam accusamus inventore maiores nostrum hic quasi reiciendis harum consequuntur possimus laborum quisquam perferendis doloribus ducimus esse fugit, incidunt voluptate aperiam consectetur dolores velit magnam nihil nisi. Ratione blanditiis possimus
adipisci vitae, libero et non, vero quia dolorum repellat facere enim ex. Eaque expedita officiis delectus sapiente voluptatibus tenetur quae doloribus accusamus fuga. Adipisci accusantium ducimus placeat. Voluptatem dolores impedit sint qui nobis
quod laudantium, quis odit quia, repellendus reiciendis cumque corporis. Quod ipsam a maiores? Perspiciatis earum aliquid eos sequi nesciunt saepe vel nisi, deserunt magni deleniti optio minus eveniet provident quidem unde cum sapiente ea sit corporis
quos esse ex harum adipisci beatae. Impedit ab quae unde, ex reprehenderit animi officia maiores perferendis molestias? Cupiditate iure, repellendus totam perspiciatis suscipit distinctio esse! Cupiditate quasi dolorum necessitatibus? Praesentium
asperiores ducimus optio sint sit ea, iste veritatis eaque magnam consequuntur temporibus consectetur, officia maxime distinctio voluptatum adipisci magni incidunt perferendis! Laboriosam, delectus, labore tenetur iusto doloremque sapiente temporibus
eos veniam ut consequuntur reprehenderit molestias corporis fugiat magni, atque facere nulla nesciunt! Laudantium, reiciendis fuga. Distinctio, a! Fuga ullam accusantium autem, libero et vero exercitationem hic nihil odio, quo expedita tempora repellat
deleniti similique quam iure quia beatae ratione optio! Aspernatur temporibus inventore molestias maxime numquam dolorum expedita saepe, commodi in quasi ipsa reprehenderit, illo fuga neque consectetur minus sapiente. Aspernatur, nihil! Officia sunt,
aut excepturi in fugiat ea accusantium quas blanditiis architecto quia, distinctio magnam consectetur adipisci. Accusantium voluptas aliquid ratione, quas vitae illum expedita, iusto mollitia qui pariatur earum natus nihil! Ab veritatis mollitia officia
unde repudiandae, praesentium maxime quae deleniti quisquam molestiae minima? Quasi nemo repellendus sunt perferendis nam dolorum, perspiciatis omnis repudiandae tempore vero ab blanditiis accusamus a inventore sint natus doloremque aliquid? Doloremque
sapiente, facere laudantium repellat corrupti impedit harum provident perspiciatis similique necessitatibus, tempore cumque fugiat assumenda, id dolore a eos eius. Libero suscipit doloribus mollitia asperiores facilis fugit iste, quas doloremque aliquam
a obcaecati placeat quod. Cumque, eaque. Recusandae porro vitae molestiae beatae quae sint culpa voluptatem aliquam unde ipsam ducimus consectetur quis, nobis repellendus at dolorem magni in. Harum voluptates sapiente consectetur molestias sed pariatur
nulla, voluptatibus quasi! Et laboriosam, cum laborum aut, magni nulla quis quaerat neque quibusdam dignissimos dolores vel tenetur laudantium inventore voluptatibus vero est explicabo doloremque sunt itaque dolor facilis fuga! Fuga temporibus fugit
maiores atque voluptatum illum inventore corrupti quos cumque earum nobis ducimus ullam eius, repellendus, minima expedita reiciendis error ea dolores laudantium perferendis libero? In recusandae iusto esse quisquam nesciunt voluptate aliquid ut pariatur
ad quidem voluptates delectus eveniet, consectetur, vel molestias corrupti! Veniam, iure quam. Rem dolore exercitationem cupiditate sit ipsum rerum, eum nemo vel, quaerat perspiciatis recusandae facere aliquid aspernatur pariatur! Blanditiis aliquid
officia voluptates quae ipsam natus quia cumque illo ratione ab quidem deleniti rem, accusamus suscipit cum distinctio quis sed sunt exercitationem velit ut? In modi eaque nesciunt consequuntur similique accusamus incidunt nisi animi omnis nemo quas
rem perferendis id ab dolorem ex, quos, cumque reprehenderit esse fugiat tempora vero sed qui? Libero quibusdam sint consequuntur nobis nemo deleniti iure, vero doloribus repellendus ad omnis velit recusandae asperiores animi obcaecati! Veritatis
facere natus iusto deserunt adipisci, itaque neque alias, doloribus consectetur maiores et impedit sunt, quibusdam error commodi blanditiis at voluptas qui tempore temporibus corrupti voluptatum eius. Itaque saepe, cumque molestias labore illum numquam
omnis voluptas laboriosam harum eveniet quo explicabo eius expedita non quisquam iure inventore adipisci. Saepe incidunt sunt, placeat sed ut magnam quam nesciunt nihil, veritatis sit totam reprehenderit, praesentium maxime rerum. Earum consequuntur
ab velit itaque dignissimos exercitationem voluptates, nulla rem reprehenderit? Tenetur molestiae corporis facilis? Suscipit, quaerat enim illum, reprehenderit beatae facilis assumenda voluptatibus dolor harum similique aliquam quas perferendis distinctio
consectetur libero debitis optio eligendi impedit illo id aliquid sequi. Perspiciatis doloribus laboriosam eos deserunt expedita sunt accusantium? Aperiam quia perferendis nesciunt hic impedit? Nihil alias laudantium nostrum neque impedit maxime incidunt
voluptatum unde temporibus possimus perferendis, sed dolorem! Possimus cum inventore quos nobis repellat, ad omnis veritatis praesentium sunt quis fugit ut voluptas ducimus pariatur officia doloremque perferendis tempore reprehenderit commodi eum
numquam voluptatem quidem reiciendis. Adipisci, tempora. Consequuntur quidem consequatur quo reiciendis commodi pariatur ullam porro harum at facilis perferendis, aliquam adipisci deleniti voluptas suscipit delectus nihil reprehenderit corrupti! Eaque
dicta pariatur, sed hic vel dignissimos excepturi accusamus. Temporibus id porro earum assumenda, qui itaque laudantium praesentium odit distinctio repellat ab commodi aspernatur tempora explicabo repudiandae ex consequuntur esse non culpa est voluptatum!
Vel ut eos temporibus dolor atque repellendus blanditiis aliquid officia at accusantium aperiam quas vitae est ea ipsum commodi tempora qui, quia odit rerum eum dicta reprehenderit deserunt! Quidem ipsa officiis asperiores excepturi tenetur minus,
vel, sequi, perferendis distinctio fuga commodi! Architecto excepturi officiis eos voluptates laborum officia dolorem, nulla est aliquam a cumque! Iste sequi magni veniam in molestiae deserunt, praesentium mollitia illo aut officiis ad! Ea ut iure
quos tempora quae commodi temporibus qui. Nam, maiores corporis quasi doloribus incidunt magni debitis quas nisi! Omnis culpa aliquid nulla ab corrupti quaerat maxime quae ad ex? Provident debitis minus dolorum? Illum eaque amet eveniet illo necessitatibus
deserunt ratione similique fuga nihil animi assumenda, numquam minima quas exercitationem dignissimos ea rerum quos veritatis tempora provident. Rem ullam fugit sed sint. Obcaecati facilis aliquid ipsum, delectus maiores eum, necessitatibus amet ducimus,
repellat architecto soluta. Voluptate nemo perferendis at esse ex repudiandae expedita amet distinctio, nisi architecto ea molestiae explicabo laboriosam iste aperiam vero in sed doloribus veritatis nostrum, consectetur impedit? Quae molestiae cumque
rem ut incidunt quis ex voluptatibus quos. Ratione architecto asperiores, provident illum odio odit obcaecati atque pariatur quo distinctio itaque commodi ipsam consectetur! Blanditiis, vitae temporibus. Delectus ducimus saepe inventore dolorem incidunt
a repudiandae magni maiores, iste necessitatibus architecto obcaecati molestias praesentium odio cumque doloribus tempore, libero eos iusto? Obcaecati laborum quis alias numquam quo quod nisi ex! Maxime natus error quae. Natus aut neque enim libero,
earum aliquam quidem! Facere amet commodi corrupti voluptatum beatae saepe officiis, itaque repellat ea explicabo sed libero cumque temporibus inventore. Itaque veniam, provident rem excepturi hic fuga necessitatibus quas quos. Omnis velit commodi
consectetur cupiditate nisi sequi distinctio quo porro odio tempora tempore laudantium eius accusantium nemo, sapiente ratione ab magnam quaerat, autem molestiae aliquam, maiores libero accusamus veniam. Facilis nemo in ab ratione molestiae deserunt
omnis vel architecto ea sit error fuga eum consequatur, culpa optio accusantium nulla. Doloremque, corrupti natus quia iste amet saepe. Ipsa ab recusandae fuga id, ipsum culpa asperiores corrupti laborum, distinctio perferendis inventore. Rerum delectus
ex nulla natus. Quasi at accusantium quam inventore iusto odio dolore debitis, earum ad tempora eveniet porro repudiandae possimus ratione saepe sequi nisi! Neque et qui aut ea voluptatibus vero saepe velit eaque ratione quam libero, ex odit aperiam
ut laudantium, iure alias? Suscipit quos amet minima voluptatibus quia perspiciatis facere distinctio ducimus placeat eius, saepe porro blanditiis laboriosam. Neque iste dolorem libero repellat magni architecto, incidunt molestias enim quo veritatis
ut eius soluta, nulla quidem, vitae voluptates. Recusandae, consectetur error distinctio illum rerum ad aliquam facilis quisquam quidem amet molestias alias sed, culpa pariatur perferendis tempore qui inventore a expedita nulla. Error vitae, aspernatur
fuga nulla praesentium, cumque beatae esse amet ut asperiores ullam cupiditate dolor ipsum alias quas possimus sunt. Voluptatibus debitis doloribus accusamus nobis voluptatem illum sunt iure libero, quis doloremque tempora vero enim qui nisi, quam
itaque vitae, quaerat natus dignissimos delectus quod aperiam. Quam laudantium vero autem, deleniti ratione sint temporibus nihil fugit ex quibusdam. Architecto sunt rerum debitis perspiciatis corrupti quae voluptatum, quasi temporibus obcaecati!
Cupiditate itaque nesciunt ex nobis quas esse cumque omnis dolores quam, sunt sequi at totam facilis dicta consectetur quasi eaque, suscipit culpa ipsa mollitia atque! Quidem perspiciatis magni dolor ad officia exercitationem vel temporibus illum
voluptatem. Earum excepturi libero officiis?
</div>
</main>
you absolute position the navbar to the top. Then you use instead of the body a wrapper with a height of 100vh - paddings top + bottom. That way the content wrapper will fill the entire screen height. Then give the content wrapper an overflow rule.
body {
margin: 0px;
padding: 0px;
}
.content p {
margin-bottom: 2000px;
}
.content {
overflow-y: scroll;
height: calc(100vh - 75px);
padding: 5px;
padding-top: 65px;
}
.navbar {
position: absolute;
top: 0;
background-color: rgba(255, 0, 0, 0.5);
height: 60px;
z-index: 2;
width: 100%;
}
<div class="navbar">navbar</div>
<div class="content">
<p>dummy</p>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With