如何滚动固定的双导航栏？

Question

So i have this two navbars which are fixed an responsive. 所以我有两个固定的响应式导航栏。 Here is my code: 这是我的代码：

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }

 body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .outer { position: fixed; top: 0px; widtH: 100%; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .active { background-color: #4CAF50; color: white; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } .secondnav { background:red; width:100%; height:42px; }

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="outer"> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="#help">Help</a> <a href="#terms">Terms</a> <a href="#privacy">Privacy</a> <a href="#cookies">Cookies</a> <a href="#activitylog">Activity Log</a> <a href="#events">Events</a> <a href="#settings">Settings</a> <a href="#notifications">Notifications</a> <a href="#friendrequest">Friend Requests</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <div class="secondnav"> </div> </div> </body> </html>

The problem is that when the window is resized and the navbar becomes responsive and i click the menu button, i can't scroll through the menus as there are many items in the navbar. 问题是，当调整窗口大小并且导航栏变得响应并且我单击菜单按钮时，由于导航栏中有很多项目，因此我无法滚动浏览菜单。 How to fix this? 如何解决这个问题？ Please don't suggest other methods. 请不要建议其他方法。 Please try to make it possible using this code. 请尝试使用此代码。
And thanks in advance! 并预先感谢！

Answer 1

You can add following CSS: 您可以添加以下CSS：

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
    max-height: 75vh; /* Set to the hegith you want to use */
    overflow-y: scroll; /* Enable scroll */
  }

And if you don't want to show the scroll bar, just add: 如果您不想显示滚动条，只需添加：

  .topnav.responsive::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
  }

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }

 body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .outer { position: fixed; top: 0px; widtH: 100%; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .active { background-color: #4CAF50; color: white; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive { position: relative; max-height: 75vh; /* Set to the hegith you want to use */ overflow-y: scroll; /* Enable scroll */ } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } .secondnav { background:red; width:100%; height:42px; }

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="outer"> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="#help">Help</a> <a href="#terms">Terms</a> <a href="#privacy">Privacy</a> <a href="#cookies">Cookies</a> <a href="#activitylog">Activity Log</a> <a href="#events">Events</a> <a href="#settings">Settings</a> <a href="#notifications">Notifications</a> <a href="#friendrequest">Friend Requests</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <div class="secondnav"> </div> </div> </body> </html>

如何滚动固定的双导航栏？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-01-10 17:18:05

如何滚动固定的双导航栏？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-01-10 17:18:05

解决方案1
0 已采纳 2019-01-10 17:18:05