移动端汉堡菜单展开后顶部空白问题排查求助

我为网站做了响应式设计，小屏设备配有专属汉堡菜单。大屏显示和小屏菜单功能均正常，但点击汉堡按钮展开菜单后，页面顶部会残留一块空白区域，无法被黑色菜单背景覆盖。我期望菜单展开后整个屏幕都变为黑色，顶部不要保留原有页面状态。

点击前的状态：

点击后的状态（顶部空白问题）：

现有代码 #

HTML

<nav>
  <div class="logo">
    <img src="https://via.placeholder.com/80" alt="Logo Image">
  </div>

  <div class="hamburger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>

  <ul class="nav-links">
    <li><a href="">Nos Produits</a></li>
    <li><a href="">Notre Histoire</a></li>
    <li><a href="">&nbsp; &nbsp; Galerie &nbsp; &nbsp;</a></li>
    <li><a href="">&nbsp; &nbsp; Salons &nbsp; &nbsp; </a></li>
    <li><a href="">&nbsp; &nbsp; Contact &nbsp; &nbsp; </a></li>
  </ul>
</nav>

CSS

/*****************************
             Font 
*****************************/
@font-face {
  font-family: 'RomanAntique';
  src: url("../../asset/font/RomanAntique.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/*****************************
     Default Background 
*****************************/
/* > 1000px */
body {
  background-image: url("../../asset/img/BackGroundTest.jpg");
  background-size: 100% !important;
}

/* < 1000px */
@media screen and (max-width: 800px) {
  body {
    background-image: url("../../asset/img/BackGroundTestPhone.jpg") !important;
    background-size: 100% !important;
  }
}

/*****************************
     Default Properties 
*****************************/
body {
  margin: 0;
  margin-top: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'RomanAntique';
  overflow-x: hidden;
  overflow-y: hidden;
}

nav {
  width: 100%;
  display: flex;
  position: fixed;
  z-index: 10;
}

/*Styling logo*/
.logo {
  padding: 1vh 1vw;
  text-align: center;
}

.logo img {
  height: 5rem;
  width: 5rem;
}

/*Styling Links*/
.nav-links {
  display: flex;
  list-style: none;
  width: 88vw;
  padding: 0 0.7vw;
  justify-content: space-evenly;
  align-items: center;
  text-transform: uppercase;
}

.nav-links li a {
  color: #FFFFFF;
  text-decoration: none;
  margin: 0 0.7vw;
}

.nav-links li {
  position: relative;
}

.nav-links li a::before {
  content: "";
  display: block;
  height: 3px;
  width: 0%;
  background-color: #FFFFFF;
  position: absolute;
  transition: all ease-in-out 250ms;
  margin: 15% 0 0 10%;
}

.nav-links li a:hover::before {
  width: 80%;
}

/*Styling Hamburger Icon*/
.hamburger div {
  width: 30px;
  height: 3px;
  background: #FFFFFF;
  margin: 5px;
  transition: all 0.3s ease;
}

.hamburger {
  display: none;
}

/*Stying for small screens*/
@media screen and (max-width: 800px) {
  body {
    margin: 0;
    padding: 0;
  }
  nav {
    position: fixed;
    z-index: 9999;
  }
  .hamburger {
    display: block;
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 999999;
    transition: all 0.7s ease;
  }
  .nav-links {
    position: fixed;
    background: #000000;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(50px at 90% -20%);
    -webkit-clip-path: circle(50px at 90% -10%);
    transition: all 1s ease-out;
    pointer-events: none;
  }
  .nav-links.open {
    clip-path: circle(1500px at 100% -10%);
    -webkit-clip-path: circle(1500px at 100% -10%);
    pointer-events: all;
  }
  .nav-links li {
    opacity: 0;
  }
  .nav-links li:nth-child(1) {
    transition: all 0.5s ease 0.2s;
  }
  .nav-links li:nth-child(2) {
    transition: all 0.5s ease 0.4s;
  }
  .nav-links li:nth-child(3) {
    transition: all 0.5s ease 0.6s;
  }
  .nav-links li:nth-child(4) {
    transition: all 0.5s ease 0.8s;
  }
  .nav-links li:nth-child(5) {
    transition: all 0.5s ease 1.0s;
  }
  li.fade {
    opacity: 1;
  }
}

/*Animating Hamburger Icon on Click*/
.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
  transition: all 0.7s ease;
  width: 0;
}
.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

JavaScript

const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");

hamburger.addEventListener('click', () => {
  navLinks.classList.toggle("open");
  links.forEach(link => {
    link.classList.toggle("fade");
  });
  hamburger.classList.toggle("toggle");
});

解决方案 #

问题根源：

1. .nav-links没有设置top: 0，默认从原导航位置开始，导致顶部露出body背景；
2. 展开时的clip-path圆心位置在右上角偏上，裁剪范围无法覆盖屏幕顶部区域。

修改步骤：

1. 给小屏样式中的.nav-links添加top: 0，让黑色背景从屏幕最顶部开始：

@media screen and (max-width: 800px) {
  .nav-links {
    position: fixed;
    background: #000000;
    height: 100vh;
    width: 100%;
    top: 0; /* 新增此行 */
    flex-direction: column;
    clip-path: circle(50px at 90% -20%);
    -webkit-clip-path: circle(50px at 90% -10%);
    transition: all 1s ease-out;
    pointer-events: none;
  }
}

2. 调整展开时的clip-path圆心到屏幕中心，确保完全覆盖整个屏幕：

@media screen and (max-width: 800px) {
  .nav-links.open {
    clip-path: circle(1500px at 50% 50%);
    -webkit-clip-path: circle(1500px at 50% 50%);
    pointer-events: all;
  }
}

修改后，菜单展开时黑色背景会从屏幕顶部开始，裁剪路径也能覆盖全屏，顶部空白问题即可解决。

内容的提问来源于stack exchange，提问作者Leherle Maxime