带背景图网站：内容滚动至透明fixed header下隐藏的优化方案咨询

安全阿岳

2026-7-12

原方案靠给#wrapper设置100vh高度和overflow-y: scroll，搭配-webkit-mask-image实现内容滚到Header下方时隐藏Header区域内容，但这种做法会打乱原有页面结构，还会和锚点跳转等功能冲突。

替代实现方案

直接让body作为原生滚动容器，给内容容器添加渐变遮罩即可达到需求，完全不影响页面结构：

修改后的CSS代码

body {
  background: url("https://keops-event.com/wp-content/uploads/2021/02/06-keops-calbar-bar-cover-2210x1245.jpg") center center no-repeat;
  color: white;
  background-size: cover !important;
  margin: 0;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  padding: 20px 20px 0 20px;
  z-index: 102;
  height: 50px;
}

#content-ajax {
  padding: 20px;
  padding-top: 70px; /* 预留Header高度+额外间距 */
  font-size: 80px;
  /* 添加顶部遮罩，让Header区域的内容透明不可见 */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 20px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 20px);
}

修改后的HTML代码

<html>
  <body>
<header>
  THIS IS THE HEADER
</header>

<div id="content-ajax">
Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.

  </div>
    
  </body>
</html>