I've been working on a website that includes a sticky navigation bar created in JavaScript. The issue arises when I scroll - the navbar starts flickering and the body shifts up as shown in the images provided below. I'm puzzled by this problem.
Right after the navbar, there's a slideshow that gets cut off by the navbar resulting in me being at the top of the page.
Also, take a look at my code below...
https://i.sstatic.net/i4aFw.png https://i.sstatic.net/qiw7n.png
/*sticky_navbar*/
window.onscroll = function() {
myFunction()
};
var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}@charset "UTF-8";
/* CSS Document */
body {
margin: 0;
font-size: 28px;
background-color: #00011f;
display: flex;
flex-direction: column;
margin: auto;
}
/* Style the navbar */
#header {
display: flex;
justify-content: flex-end;
background: rgba(139, 139, 157, 1);
z-index: 2;
}
#Title {
margin: 0 auto 0 0;
height: 20px;
margin-top: 20px;
padding-left: 10px;
border-bottom: 1px solid white;
padding-top: 10px;
padding-bottom: 35px;
flex: 1;
}
#navbar {
overflow: hidden;
background: rgba(139, 139, 157, 0);
display: flex;
justify-content: flex-end;
border-bottom: 5px solid white;
padding-bottom: 20px;
padding-top: 20px;
}
... (content continues)