Can we achieve the following using pure CSS without the use of JavaScript, by utilizing the sticky position property?
* {
margin: 0;
padding: 0;
font-family: arial;
}
header {
width: 100%;
height: 200px;
background: grey;
}
.sticky-nav {
position: sticky;
top: 0;
width: 100%;
background: black;
color: pink;
}
.nav-items {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
list-style-type: none;
}
.nav-items li {
margin: 10px 20px;
}
.header-content {
font-size: 3rem;
padding: 20px 10px;
}
.site-content {
min-height: 2000px;
background: pink;
padding: 30px;
}<header>
<div class="sticky-nav">
<ul class="nav-items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div class="header-content">
Part of the Header
</div>
</header>
<div class="site-content">
<p>
When the user scrolls to this point (site-content) - the top nav should now be sticky
</p>
</div>Check out the jsfiddle link for reference: https://jsfiddle.net/eyfbh3v2/
Is it feasible to make the top sticky-nav fixed to the top of the page only after the header has scrolled out of view or when .site-content reaches the top of the page during scrolling?