How to hide element when it on first section of page

Question

I have a one-page website with 4 sections, and it's not scrollable. I have burger menu button for moving between sections, it has fixed position so it shows on all sections but I don't need it on the first section. How can I hide it? I tried with js but it didn't work.

<script>
    $(document).ready(function() {
   var windowURL = window.location.href;
   console.log(windowURL);

   if (windowURL.indexOf('index.html#slide1') > -1) {
     $('#burger').css('display', 'none');
   }
});
   </script>

Answer 1

Assuming you are using a button to navigate from the first section since it's not scrollable, you can use

display: none

on your burger menu by default then use a function that shows the burger menu:

function showBurger() {
  var burger = document.getElementById("burger");
  burger.classList.add("shown");
}

to the button's on click event, assuming you use another button to navigate back to the first section then you can add another function that removes the burger again to its onclick event:

function removeBurger() {
  var burger = document.getElementById("burger");
  burger.classList.remove("shown");
}