Im trying to create a fixed header with variable height. I'll explain myself, say you get into the site and the header is visible, and it is 40px of height. once you scroll down the header is now 30px, and it is fixed. How can I achieve this? I know I am supposed to write some code but I have no idea on where to start. I know how to make a fixed header but dont know how to implement the variable height feature. Any advice or code snippets are very welcome.
I think this code can help you.
window.onscroll = function() {
var header = document.getElementsByTagName('header')
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
header[0].classList.add('header-scroll');
} else {
if (header[0].classList.contains("header-scroll")) {
header[0].classList.remove('header-scroll');
}
}
}.container {
height: 200vh;
padding-top: 40px;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: green;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
height: 40px;
transition: all .3s ease;
}
.header-scroll {
height: 30px;
}<div class="container">
<header>
</header>
<p>Scroll me</p>
</div>You can do it with pure CSS by nesting position: sticky; elements and give the navbar as position a top: -10px
<nav> to the fixed height of 40pxnav { position: sticky; top: -10px; }. That will allow the navbar to scroll 10px off the viewport leaving it's height at 30px visible.display: sticky; to it. Now use top: 0; to prevent those elements from leaving the viewport.nav {
position: sticky;
top: -10px;
height: 40px;
background-color: red;
}
nav > div {
position: sticky;
top: 0;
}
/* for scrolling purpose only */
body {
min-height: 500vh;
margin: 0;
}
/* if you want the text vertically centered */
nav {
display: flex;
align-items: center;
}
nav > div {
display: flex;
align-items: center;
height: 30px;
}<nav>
<div>Test</div>
</nav>