For the past few days, I've been grappling with a persistent issue that seems to be causing glitches on my site, especially when viewed on my iPhone. The problem lies in the sticky navbar, which snaps to the wrong place and jumps too fast when scrolling down. Despite attempting various solutions such as adjusting padding on the content and stickiness settings, I have yet to resolve the issue.
If you visit the URL and scroll down to where the navbar should remain at the top of the page, you'll notice the erratic behavior. Additionally, when accessing the site on mobile, the navbar sticks at the wrong height and doesn't wait until it's reached.
You can view the bug on mobile by clicking here.
Please see below for snippets of JavaScript and CSS code related to the issue:
// JavaScript
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
/* CSS */
html, body{
overflow-x:hidden;
}
.banner {
position: relative;
background: url('bannerimage.png') no-repeat center;
width: 100%;
height: auto;
}
/* Additional CSS styling omitted */
I have minimized the HTML code for clarity. Your assistance in resolving this issue would be greatly appreciated. Thank you!