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

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>

在这里，您叫myFunction()来切换汉堡菜单的状态。但是，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");
  }
}