I am trying to create a fixed menu that sticks to the browser window as it scrolls. However, I am encountering an issue where the transition from sticky to fixed is not smooth when I remove position: relative; from navbar__box.
window.onscroll = function() {myFunction()};
function myFunction() {
if (window.scrollY > 0) {
var parentwidth = $('.header').width();
$('.navbar__box').addClass("fixed").width(parentwidth);
} else {
$('.navbar__box').removeClass('fixed').width(parentwidth);
}
}.fixed {
background: aliceblue;
box-shadow: 0 1px 7px $black;
position: fixed;
top: 0;
padding-top: 10px;
z-index: 1299;
}
.navbar__box {
position: relative;
transition: all 0.3s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header" >
<div class="navbar__box">
<div class="navbar">
<nav class="navbar__nav">
<ul id="nav" class="navbar__nav--list">
<li class="navbar__nav--list-item">
<a href="#Home">Home</a>
</li>
</ul>
</nav>
</div>
</div>
</header>