响应式导航栏点击toggle图标下拉菜单不显示问题

问题现象 #

实现带下拉功能的响应式顶部固定导航栏时，点击汉堡切换按钮出现两个异常：

• 点击按钮后下拉菜单未正常展示
• 页面向下滚动后点击按钮，页面会自动跳转回顶部，必须滚动到页面最顶端才能看到展开的导航选项

原有实现代码 #

HTML #

<!-- Responsive Top Navbar -->
<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 class="topnav-right" href="#">Sign Up</a>
    <a class="topnav-right" href="#">Sign In</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
    </a>
</div>

CSS #

/* Navbar Top */
body {
margin:0;
font-family:Arial
}

.topnav {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
 }

.topnav a {
 float: left;
 display: block;
 color: #f2f2f2;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;
 }

 .active {
  background-color: #04AA6D;
  color: white;
  }

  .topnav .icon {
   display: none;
   }

   .dropdown-content a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
   }

  .topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
  }

  .dropdown-content a:hover {
   background-color: #ddd;
  color: black;
   }

  .dropdown:hover .dropdown-content {
   display: block;
    }

   @media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
   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;
 }

.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
 display: block;
 width: 100%;
 text-align: left;
 }
 }

故障原因 #

核心问题有三处：

1. 移动端响应式样式逻辑错误：媒体查询中给展开状态的.topnav.responsive设置了position: relative，覆盖了导航栏默认的position: fixed固定定位。点击按钮切换类名后，导航栏会从视口固定位置回到页面文档流的最顶端，直接造成页面视觉上“跳回顶部”，展开的菜单也随导航栏回到页面顶部，滚动位置无法看到。
2. 代码缺失切换类名的JS逻辑：HTML中绑定了myFunction()点击事件，但没有对应函数实现，类名无法正常切换，菜单自然无法展开。
3. 固定导航栏未给主体内容预留顶部间距，会导致页面顶部内容被导航栏遮挡。

修复步骤 #

1. 修正移动端展开状态的导航栏定位，删除.topnav.responsive的position: relative规则，保留固定定位，同时修改溢出属性，让展开的菜单项不被裁剪：

/* 替换原有 .topnav.responsive 定位样式 */
.topnav.responsive {
  overflow: visible;
}

2. 补全菜单切换的JS函数，放在页面</body>标签前即可：

function myFunction() {
  const nav = document.getElementById("myTopnav");
  nav.classList.toggle("responsive");
}

3. 给body添加顶部内边距，预留导航栏高度，避免内容被遮挡：

body {
  margin:0;
  font-family:Arial;
  padding-top: 48px; /* 导航栏高度约48px，可根据实际样式调整数值 */
}

内容的提问来源于stack exchange，提问作者John Cañero