I have a navbar that currently sticks to the top of the screen as I scroll all the way down the page. Ideally what I want is for it to unstick after reaching the bottom of the canvas element that forms the top half of the page, and then go back up with the page if it's scrolled back up.
I've tried a couple of searches and I think I can probably do it with jQuery but I'm pretty new to it and not sure where to start. Any help appreciated!
HTML
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand abs" href="#">Donald Barr</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapseNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="https://github.com/db1692"> <img class="logos" src="images\GitHub-Mark-64px.png" alt=""> </a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="mailto: x" data-bs-target="#myModal" data-bs-toggle="modal"><img class="logos" src="images\email.png" alt=""></a>
</li>
</ul>
</div>
</div>
</nav>
<body>
<canvas id="canvas"></canvas>
<div class="splash-wrapper"> **This is where I want the navbar to stop**
<div class="splash-content">
<img class="headshot faded" src="images\NYC-Pic.jpg" alt="" />
</div>
<div class="splash-text">
<h1 class="faded"></h1>
</div>
<div class="splash-text">
<p class="faded">Filler text here</p>
</div>
.navbar {
background: rgba(0, 0, 0, 0.4);
font-family: 'Merriweather', serif;
font-size: 2rem;
top: 0;
width: 100%;
height: 50px;
margin: auto;
text-align: center;
}
.navbar-brand {
font-size: 1em;
padding-right: 13px;
}
@media (min-width: 768px) {
.navbar-brand.abs {
position: absolute;
width: auto;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
}
.logos {
max-width: 35px;
}
You can use onscroll event handlers to check the scroll position and un-stick the navbar when needed.
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll