在页面第一部分时如何隐藏元素

Question

我有一个包含4个部分的单页网站，它不能滚动。 我有汉堡菜单按钮，可以在各个部分之间移动，它具有固定的位置，因此可以在所有部分上显示，但在第一部分中不需要。 我怎么藏起来？ 我尝试使用js，但是没有用。

<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

假设您正在使用按钮从第一部分导航，因为该按钮不可滚动，因此可以使用

display: none

默认情况下，在汉堡菜单上使用显示汉堡菜单的功能：

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

到按钮的onclick事件，假设您使用另一个按钮导航回第一部分，则可以添加另一个功能，将汉堡再次删除到其onclick事件：

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