javascript - 固定导航 - 无滚动

Question

您好，目前正在做一个快速网站，设置了标题和切换导航，但是由于导航栏是固定的，如果导航栏高于屏幕高度，则不允许在导航栏上滚动，尝试了溢出:滚动和相对位置但似乎找不到解决方法，感谢提供的任何帮助。

function NavToggle() {
  var tn = document.getElementById("nav-bar")
  if(tn.style.display === "none"){
    tn.style.display = "block";
  } else {
    tn.style.display = "none";       
  }    
}

*{
   box-sizing: border-box;
   font-family: sans-serif;
   margin: 0;
   padding: 0;    
 }

html, body{    
  overflow-y: auto;
}

ul{
  margin: 0;
  padding: 0;
}


/* Header and Navigation */

header{
  width: 100vw;
  height: auto;
  background-color: #222;
  position: fixed;
  z-index: 1;
}

nav{
  display: none;
  z-index: 2;
}

.title-wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  width: 100vw;
  padding: 0 10px;
}

/* menu base styles */

nav ul{
  list-style-type: none;
}

nav li{
  height: 50px;
}

.title-wrapper>a{    
  font-size: 16px;
}

a{
  color: #999;
}


nav a{
  text-decoration: none;   
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  font-size: 14px;
  padding-left: 10px; 
}

nav a:hover{
  color: #fff;
}

/* Menu Toggle Styling */

.menu-toggle{
  font-size: 26px;
  color: #fff;
  cursor: pointer;    
  padding: 0 15px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;    
}

.menu-toggle-button{
  padding: inherit;
}

<header class="nav-wrapper header-container">
  <div class="header-wrapper">
    <div class="title-wrapper">
      <a class="a-tag header-title">Chemical Finger Print Analysis</a>
      <div class="menu-toggle">
        <span id="menu-toggle-button" onclick="NavToggle()">&#9776;</span>
      </div>  
    </div>
    <nav id="nav-bar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Data</a></li>
        <li><a href="#">Reports</a></li>                        
      </ul>
      <ul>
        <li><a href="#">Register</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </nav>
  </div>
</header>

Answer 1

只需将 overflow-y: auto;max-height: 100vh; 添加到 .header 中，如下所示:

function NavToggle() {
    var tn = document.getElementById("nav-bar")
    if(tn.style.display === "none"){
        tn.style.display = "block";
    }
    else{
        tn.style.display = "none";       
    }    
}

html, body{    
    overflow-y: auto;
}

ul {
    margin: 0;
    padding: 0;
}


/* Header and Navigation */

header {
    width: 100vw;
    height: auto;
    background-color: #222;
    position: fixed;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100vh;
}

nav {
    display: none;
    z-index: 2;
}

.title-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    width: 100vw;
    padding: 0 10px;
}

/* menu base styles */

nav ul{
    list-style-type: none;
}

nav li{
    height: 50px;
}

.title-wrapper>a{    
    font-size: 16px;
}

a{
    color: #999;
}


nav a{
    text-decoration: none;   
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    font-size: 14px;
    padding-left: 10px; 
}

nav a:hover{
    color: #fff;
}

/* Menu Toggle Styling */

.menu-toggle{
    font-size: 26px;
    color: #fff;
    cursor: pointer;    
    padding: 0 15px 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;    
}

.menu-toggle-button{
    padding: inherit;
}

<header class="nav-wrapper header-container">
            <div class="header-wrapper">
                <div class="title-wrapper">
                    <a class="a-tag header-title">Chemical Finger Print Analysis</a>
                    <div class="menu-toggle">
                        <span id="menu-toggle-button" onclick="NavToggle()">&#9776;</span>
                    </div>  
                </div>
                <nav id="nav-bar">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Data</a></li>
                        <li><a href="#">Reports</a></li>                        
                    </ul>
                    <ul>
                        <li><a href="#">Register</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </nav>
            </div>
        </header>

希望对您有所帮助。