0

I have the following navbar on my website . Plese check out :

https://codepen.io/bunea-andrei/pen/jOBGNgd?editors=1010

When i scroll down on my page , the navbar stays open and i would like it to disappear on scroll .

I assume i need a bit more validation in my js file , i'll leave that here as well .

Any help is welcome , thank you in advance .

JS CODE HERE

const wrapperSlide = () => {
    const burger = document.querySelector(".burger");
    const wrapper = document.querySelector(".wrapper");

    const wrapperLinks = document.querySelectorAll(".wrapper span");

    burger.addEventListener("click", () => {
        
            wrapper.classList.toggle("wrapper-active");


            window.addEventListener('mouseup', function (event) {
                if (event.target != wrapper && event.target != burger && event.target.parentNode != burger && event.target.parentNode != wrapper && burger.classList.contains("toggle")) {
                    wrapper.classList.remove("wrapper-active");
                    burger.classList.toggle("toggle");
                }
            });
          


            //Burger Animation
            burger.classList.toggle("toggle");
        });

    }


wrapperSlide();
Bunea Andrei
  • 13
  • 5
  • Well, you should listen to a `scroll` or `wheel` event to capture scrolling. Don't add event listeners within listeners. Now everytime you click on the burger icon a new listener will be added to the `window` object, making your code unstable. Your codepen is not a in a good shape for us to debug. Preferably, create a Stack Snippet and create a runnable example here. Off-site sources (like CodePens) might change or break making the question impossible to reproduce. – Emiel Zuurbier Jun 05 '21 at 17:53
  • I second that the relevant HTML and CSS should be included in the question. – Anis R. Jun 05 '21 at 17:56

1 Answers1

0

Using position: sticky instead of position: fixed on your menu should help.

To better understand the difference, you may want to check out Difference between position:sticky and position:fixed?

Anis R.
  • 6,656
  • 2
  • 15
  • 37