After implementing a navigation bar that works on scroll down, I ran into an issue where it doesn't stop at the original position on scroll up. Despite finding a similar post addressing this problem, I struggled to apply the solution correctly due to my limited experience in web development. Initially, the navigation bar didn't work at all, but after digging through Stack Overflow, I managed to get it partially functional. Hopefully, someone can help me out with fixing it! Thank you in advance for taking the time to read and assist.
Relevant CSS-
nav {
z-index: 500;
background-color: #e7ecf2;
}
.nav-placeholder {
margin: 0 0 20px 0;
}
.fixed {
position: fixed;
top: 5px;
left: 0;
width: 100%;
background-color: transparent;
}
.fixed .nav-inner {
max-width: 700px;
margin: 0 auto;
background-color: transparent;
}
Relevant JQuery-
$(document).ready(function() {
var navOffset = $("nav").offset().top;
$("nav").wrap('<div class="nav-placeholder"></div>');
$(".nav-placeholder").height($("nav").outerHeight());
$("nav").wrapInner('<div class="nav-inner"></div>');
$(window).scroll(function() {
var scrollPos = $(window).scrollTop();
if (scrollPos >= navOffset) {
$("nav").addClass("fixed");
} else {
$("nav").removeClass("fixed");
}
});
});
Relevant HTML-
<nav class="row wrapme container-fluid"><div class="nav-placeholder">
<div class="nav-inner"><div class="col-sm-3">
<button class="btn btn-block target">About Me</button></div>
<div class="col-sm-3"> <button class="btn btn-block target" id="target2">Portfolio</button></div>
<div class="col-sm-3"> <button class="btn btn-block target" id="target3">Contact</button></div>
<div class="col-sm-3"><button class="btn btn-block target" id="target4">Links</button></div>
</div> </div></nav>