Scenario
In the setup, I've implemented a reverse sticky navbar where it remains in position:fixed at the top. However, once the top of a specific div container touches the bottom of the navbar, I switch it to position:static using jQuery.
Challenge
The issue arises when the navbar transitions to position:static, causing it to disappear (you can see this problem clearly by viewing the code in full screen). What I actually want is for the navbar to remain fixed to the top of the div container as you scroll to the bottom of the page, eventually moving out of view when its position is no longer fixed. An example of the desired behavior can be seen here: http://jsfiddle.net/vx8uc2rm/.
var fixmeTop = $('.texttop').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop()+210;
if (currentScroll >= fixmeTop) {
$('.header-container').css({
position: 'relative'
});
} else {
$('.header-container').css({
position: 'fixed',
top: 0,
left: 0
});
}
});body {
background-color: #fbfaf8;
overscroll-behavior: none;
overflow: scroll;
}
.myheroimage {
background-color:palevioletred;
min-height: 1400px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 0;
}
.header-container {
width: 100%;
position: fixed;
z-index: 99;
background-color: #fbfaf8;
height: 180px;
}
header {
display: flex;
justify-content:space-between;
padding: 30px 120px;
align-items: center;
margin-bottom: 80px;
}
a {
color: white;
text-decoration: none;
}
a.mybutton {
color: #191919;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: 3px;
}
a.mybutton:hover {
color: #758086;
}
a.mybutton1 {
color: #35BDAF;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: 3px;
}
.mybutton{
margin-left: 44px;
}
.texttop {
text-align: center;
font-family: 'Roboto', sans-serif;
letter-spacing: 4px;
font-size: 2rem;
margin: 0 0 68px
}
.container-projects {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content:flex-start;
margin: 0 120px 120px;
}
.footer-container {
background-color:#1E2224;
color: white;
font-family: 'Roboto', sans-serif;
letter-spacing: 1px;
font-weight: 300;
font-size: 1rem;
height: 150px;
padding: 50px 120px 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="css-reset.css">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Racing+Sans+One&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="hiddenoverflow"></div>
<div class="myheroimage">
<div class="header-container">
<header>
<div class="logo"></div>
<nav>
<a href="#" class="mybutton1">Title</a>
<a href="#" class="mybutton">Title2</a>
<a href="#" class="mybutton">Title3</a>
</nav>
</header>
</div>
</div>
<div class="texttop">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="container-projects">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia quam tempora quibusdam in atque! Nobis explicabo, at facere, sint sunt voluptas ad nesciunt deleniti dolorem aliquid dolor repellendus hic labore? [...]