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

您修复了整个<header>，但您需要修复title-wrapper，这是工作代码

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: relative;
  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;
  position: fixed;
  background-color: #222222;
}


/* 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 2

只需将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>

希望这会对你有所帮助。

固定导航 - 无滚动

2 个答案: