Question

我必须为我的学校项目建立一个网站而且我做了但是有一个问题。我的导航栏有单击链接时下拉的菜单，并且还有它，因此触摸顶部时的栏变得粘稠，但是当我向下滚动时，菜单被缩短并且几乎看不到。可以在此https://gyazo.com/4549278923f72e383f8fbbda0ddb0a2d中看到。

#navbar {
 padding-bottom: 0px;
 padding-top: 0px;
 overflow:hidden;
 width:1080px;
 background-color:rgb(235,0,0);
 font-family: "montserrat";
 padding-left: 470px;
 height: 70px;
 margin-left: -8px;
}
.text{
  color:white;
  padding-left:50px;
  float:left
}
.mySlides {display:none;}
.middle{
  margin: -10;
  padding-top: 0.5%;
}
.menu {
    float: left;
    overflow: visible;
    padding-top: 25px;
    font-family: montserrat;
    font-size: 16px;  
}
.menu2 .button {
    cursor: pointer;
    padding-left: 60px;
    font-size: 16px; 
    font-family: montserrat;  
    border: none;
    outline: none;
    color: white;
    background-color: inherit;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow:rgb(100,0,0);
    z-index: 1;
} 
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    overflow: visible;
}
.show {
    display: block;
    overflow: visible;
}
.sticky{
  top:0;
  position: fixed;
  padding-top:60px;
  width: 100%;
}
</style>
</head>
<body onscroll="stickyBar()">
<div id="homejump">
<img src="Logomakr_9xaA4u.png" alt="Logo" style="width:28%; height:25%; padding-left:35%; padding-right:35%; overflow: hidden;">
</div>
<div id="navbar"><div class="menu">
<a href="#homejump" style="color: white;text-decoration: none;">Home</a></div>
<div class="menu"><div class="menu2">
<button class="button" onclick="mental()">Mental Health
    </button>
        <div class="dropdown-content" id="myDropdown">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a></div></div></div>
      <div class="menu"><div class="menu2">
    <button class="button" onclick="physical()">Physical Health
    </button>
        <div class="dropdown-content" id="myDropdown1">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a></div></div></div>
      <div class="menu"><div class="menu2">
    <button class="button" onclick="rehab()">Rehab
    </button>
        <div class="dropdown-content" id="myDropdown2">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a></div></div></div>
</div>
 <script>
var myIndex = 0;
carousel();
function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 7000);
}
 function mental() {
 document.getElementById("myDropdown").classList.toggle("show");
}
 function physical() {
 document.getElementById("myDropdown1").classList.toggle("show");
}
 function rehab() {
 document.getElementById("myDropdown2").classList.toggle("show");
}
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;  
function stickyBar() {
  if (window.pageYOffset >= sticky) 
     {navbar.classList.add("sticky");}
     else {navbar.classList.remove("sticky");}
}
</script>

这是菜单的所有代码以及使条形图变粘。我该如何解决这个问题？

Answer 1

你的#navbar是70px的高度并且有溢出：隐藏价值，这就是你没有看到更多的原因

Answer 2

这是您管理变量的方式。在stickyBar函数调用中，navbar变量未知（不在函数范围内）。您必须在函数中使用它或使用参数化函数。

解决方案示例：

function stickyBar() {

 var navbar = document.getElementById("navbar");

 if (window.pageYOffset >= sticky) 
 {navbar.classList.add("sticky");}
 else {navbar.classList.remove("sticky");}
}

菜单不会在我的网站上完整显示。

2 个答案: