在我们的页面上，我们有一个 position: fixed header ，它在您滚动时保持在页面顶部。我们的产品团队希望在这个固定元素和顶部导航栏之间有一个间隙/边距。
但是，一旦我们添加了这个间隙，当用户滚动时，他们就可以看到元素在固定标题上方滚动。我创建了一个 jsfiddle 来显示问题:
https://jsfiddle.net/9n50o567/
如果向下滚动，灰色部分会在您滚动时显示在浅蓝色标题上方。
有没有办法对用户隐藏这个？因此，固定元素上方显示的只是背景颜色，或者背景图像(如果有的话)(因为它会因用户而异)。本质上是屏蔽元素？
我们已经尝试创建一个 div，它采用与主体背景颜色相同的颜色，但是当有背景图像时，这就不起作用了。我们还尝试使用 jQuery 来检测该部分中存在哪些元素并在它们滚动时隐藏它们，但如果元素大于标题，它会过早消失。
我不确定这是否有意义，所以如果您还有其他问题，请随时在下面提问。
最佳答案
这并不完美，当然它适用于颜色，但背景图像可能有点难。
<body> 上的定位伪元素继承 body bg 颜色似乎有效。
body {
background: red;
position: relative;
}
body::before {
content: '';
height: 25px;
display: block;
width: 100%;
background: inherit;
position: fixed;
top: 0;
left: 0;
}
.header {
background-color: #ccffff;
height: 300px;
width: 500px;
border: 1px solid black;
position: fixed;
top: 25px;
left: 8px;
}
.push {
height: 335px;
}
.section {
background-color: #cccccc;
height: 300px;
width: 500px;
border: 1px solid black;
margin-bottom: 15px;
z-index: 10;
}<div class="header"></div>
<div class="push"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>背景图片 fiddle(使用 background-attachment:fixed )- Fiddle
关于javascript - 只显示固定元素上方的背景图像/颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37940800/