仅在移动视图中单击汉堡时，粘性导航栏消失

Question

不知道为什么，但粘性导航栏工作正常，除非我在移动视图中向下滚动。当我单击“菜单单击此处”时，整个导航栏就会消失。我认为 javascript 函数正在删除粘性类，但我不知道如何解决这个问题。http://lonestarwebandgraphics.com//* Toggle between adding and removing the "responsive" class to bottomnav when the user clicks on the icon */function myFunction() {var x = document.getElementById("mybottomnav");if (x.className === "bottomnav") {x.className += " responsive";} else {x.className = "bottomnav";}}

Answer 1

问题出在你的myFunction功能上。

<a href="javascript:void(0);" class="icon" onclick="myFunction()"><p>Menu Click Here </p>  ☰</a>

在这里，您调用 yourmyFunction()来切换汉堡菜单的状态。但是，myFunction无法管理切换。

因此，要使其正常工作，请更改您当前的版本

function myFunction() {

  var x = document.getElementById("mybottomnav");

  if (x.className === "bottomnav") {

    x.className += " responsive";

  } else {

    x.className = "bottomnav";

  }

}

到下面这个：

function myFunction() {

  var x = document.getElementById("mybottomnav");

  if(x.classList.contains("responsive")) {

    x.classList.remove("responsive");

  } else {

    x.classList.add("responsive");

  }

}