Check out my Codepen demo here: https://codepen.io/nickfindley/pen/dJqMQW
I am seeking to replicate the current behavior of the page without specifying a fixed height for the header. The goal is to make the header adjust dynamically based on the content, adapt to window resizing, and be hidden when scrolling down the page. Additionally, I want the navbar to stick at the top using some JavaScript.
var pn = $(".page-nav");
pns = "page-nav-scrolled";
hdr = $(".page-header").height();
$(window).scroll(function() {
if ($(this).scrollTop() > hdr) {
pn.addClass(pns);
} else {
pn.removeClass(pns);
}
});
$(window).on("scroll load", function() {
pn.toggleClass(pns, $(this).scrollTop() > hdr);
});body {
margin: 0;
padding-top: 10em;
}
.page-header {
background-color: yellow;
text-align: center;
padding: 2em 0;
position: fixed;
top: 0;
width: 100%;
height: 20em;
z-index: -100;
}
.page-nav {
background-color: black;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
width: 100%;
height: 4em;
position: relative;
margin-bottom: -4em;
z-index: 10000000;
}
/* Other CSS styles... */
/* Include references to jQuery library and main HTML structure */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="page-header" role="banner">
<section class="header-content">
<h1>Fixed Header</h1>
<p>Lorem ipsum dolor sit amet...</p>
</section>
</header>
<nav class="page-nav" role="navigation">
<div class="nav-wrapper">
/* Navbar HTML content goes here */
</nav>
<main class="page-main">
<section class="page-content">
<article class="entry">
<header class="entry-header">
<h2>Quisque a dolor vel leo porttitor luctus</h2>
</header>
<section class="entry-content">
<p class="type">Lorem ipsum dolor sit amet...</p>
</section>
</article>
</section>
</main>I would prefer a pure CSS solution, but I'm also open to suggestions involving JavaScript.