Question

在我们的页面上，我们有一个position: fixed标题，在您滚动时会保留在页面顶部。我们的产品团队希望在此固定元素和顶部导航栏之间存在差距/差距。

但是，一旦我们添加了这个间隙，当用户滚动时，他们就可以看到在固定标题上滚动的元素。我创建了一个jsfiddle来显示问题：

https://jsfiddle.net/9n50o567/

如果向下滚动，滚动时灰色部分会出现在浅蓝色标题上方。

无论如何都要向用户隐藏此内容？因此，在固定元素上方显示的所有内容都是背景颜色，或者如果有背景颜色则显示背景图像（因为它会因用户而异）。基本上掩盖元素？

我们尝试创建一个与主体背景颜色颜色相同的div，但是当有背景图像时这不起作用。此外，我们尝试使用jQuery来检测该部分中存在哪些元素，并在它们滚动时隐藏它们，但如果元素大于标题，它将过早消失。

我不确定这是否有意义，所以如果您有任何其他问题，请随时向我们提问。

Answer 1

这并不完美，当然它适用于颜色，但背景图像可能会有点难度。

继承body bg颜色的<body>上定位的伪元素似乎有效。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

JSfiddle Demo

背景图片小提琴（background-attachment:fixed） - Fiddle

Answer 2

使用div作为间隙（.headergap），见下文。

<强>的CSS：

.headergap{
  background-color: #cccccc;
  position:fixed;
  top:0px;
  height: 25px;
  width: 100%;
}

.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
}

<强> HTML

<div class="headergap"></div>
<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>

见小提琴： https://jsfiddle.net/6bhhn869/

Answer 3

Updated code

我已使用vh计时，您可以使用jquery计算高度并将其应用于in-wrap。

仅显示固定元素上方的背景图像/颜色

3 个答案: