I'm encountering an issue with my navigation bar. I have implemented a script to fix its position at the top of the site, but the base position for the navigation bar is not at the top by default. To workaround this, I made it jump to the top when the user scrolls down the website. However, this abrupt jump to the top feels unnatural and I am seeking a smoother transition. I want the navigation bar to behave more fluidly.
Here are the scripts I'm currently using:
CSS:
#menu {
text-align: center;
height: 65px;
width: 100%;
z-index: 9999;
position: fixed; // Initially set to "fixed", attempted changing to "relative" but script stopped working.
background-color: #0F1113;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #63842d;
}
.f-nav { // Tried using position fixed or relative here after changing above CSS, still no luck.
top:0;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}
Javascript:
$("document").ready(function($){
var nav = $('#menu');
$(window).scroll(function () {
if ($(this).scrollTop() > 125) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
The current setup works, but the initial jump when scrolling feels unnatural.
I tried another script that hides the navigation bar while scrolling down, but it caused issues with my header as it only displayed the navigation bar when scrolling up.
CSS:
body {
margin: 0;
padding: 0;
}
.fxdHdr {
-webkit-transform: translateY(-60px);
-moz-transform: translateY(-60px);
-ms-transform: translateY(-60px);
-o-transform: translateY(-60px);
transform: translateY(-60px);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.28);
}
header {
height: 60px;
background: #d3145a;
position: fixed;
left: 0;
right: 0;
top: 0;
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-ms-transition: -ms-transform 500ms ease;
-o-transition: -o-transformtransform 500ms ease;
transition: transform 500ms ease;
text-align:center;
line-height:60px;
}
Javascript:
var lastScroll = 0;
var scrollToStick = $("header").height();
$(window).on('scroll', function (evt) {
var newScroll = $(window).scrollTop();
$('header').toggleClass('fxdHdr', newScroll > lastScroll && newScroll > scrollToStick);
lastScroll = newScroll;
});
I'm looking for assistance in creating a more natural movement for my navigation bar, as the current jump from the base position to the top on first scroll is jarring.
Visit my website: here