gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 20:33:09 25 4
gpt4 key购买 nike

在我们的页面上,我们有一个 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>

JSfiddle Demo

背景图片 fiddle(使用 background-attachment:fixed )- Fiddle

关于javascript - 只显示固定元素上方的背景图像/颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37940800/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com