Hey,
So I have put together a nav bar at the top of my page, and made it sticky using
CSS:
/* NavBar Sticky */
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: -webkit-fill-available;
}
.sticky + .content {
padding-top: 0;
}
JS:
// When the user scrolls the page, execute myFunction
window.onscroll = function() {StickyFunction()};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// StickyNavBar
function StickyFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
The slight issue is however that the rest of the page will move to fill the space. As seen below
So, I’m mostly looking for some guidance to transition the div moving up to the where the nav bar was originally located,
or if anyone has a simpler idea that would be great!
Since it can appear very choppy, if you are too slowly scroll, if you need any extra information, about the
- css,
- js
- html
I’m more than happy to help.
Note:
( I have already attempted to use WW3 schools, if you find a link that would be helpful as well! )
Many Thanks,
Tom