HTML/CSS实现滚动时sticky border及导航点击问题求助

快速修复现有代码 #

给.pagewrap添加pointer-events: none属性，它会忽略所有鼠标事件，让下方的.content元素正常响应点击：

.pagewrap {
  height: 100vh;
  border: 15px solid gray;
  position: sticky;
  top: 0;
  z-index: 2;
  pointer-events: none; /* 新增此行 */
}

原理说明 #

pointer-events: none会让元素不再接收任何鼠标/触摸操作，点击、hover等事件会直接穿透到下方元素。这样既保留了.pagewrap的层级优先级（边框不会被内容覆盖），又不会影响内容的交互性。

更简洁的替代实现 #

如果不想用负margin的布局，也可以用body伪元素实现全局粘性边框，代码更简洁且无堆叠冲突：

body {
  margin: 0;
  background-color: lightgray;
  min-height: 100vh;
  padding: 15px; /* 预留边框位置 */
  box-sizing: border-box;
}

/* 用伪元素生成固定边框 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 15px solid gray;
  z-index: 10;
  pointer-events: none; /* 避免拦截内容事件 */
}

.content {
  position: relative;
  z-index: 1;
}

对应的HTML可以去掉.pagewrap，直接保留内容结构：

<div class="content">
  <header>
    <a href="/">
      <img id="logo" src="img/Cropped_Image.png" alt="logo">
    </a>
    <nav class="navbar">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <!-- 可添加更多页面内容 -->
</div>

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