I have been working on a website where all pages feature a header and a navbar located just below it. As the user scrolls down the page, I want the navbar to stick to the top of the screen once it reaches that position.
However, on one specific page, I am implementing a pure parallax scrolling effect using HTML5 and CSS3. The issue I encountered is that the JavaScript code does not seem to detect when the navbar reaches the top of the screen with this parallax effect active.
Can someone provide guidance on how to adjust the JavaScript code to identify the position correctly or suggest an alternative approach to run the parallax effect from just below the navbar, keeping it completely separate from the effect?
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}