极客观点
项目管理
HarmonyOS
所以我有这个标题屏幕“动画”，它的标题以全屏页面为中心，当你向下滚动时，它会变小并保持在页面的顶部。这是一个具有预期行为的工作示例，我从中删除了所有不必要的代码以使其最小化：
$(window).scroll( () => {
"use strict";
let windowH = $(window).height();
let windowS = $(window).scrollTop();
let header = $("#header").height();
if (windowS < windowH-header) {
$("#title").css("transform", "scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
$("#header").css("transform", "translateY(0)");
$("#inside, #content").css({
"position": "static",
"margin-top": 0
});
} else {
$("#inside").css({
"position": "fixed",
"margin-top": -windowH+header
});
$("#content").css("margin-top", windowH);
}
$("#header").css("position", windowS > (windowH-header)/2 ? "fixed" :"static");
});
.fixed {
position: fixed!important;
}
.wrapper {
width: 100%;
text-align: center;
}
.wrapper:before {
display: table;
content: " ";
}
.wrapper:after {
clear: both;
}
#inside {
width: 100%;
height: 100vh;
background-color: lightcoral;
display: flex;
align-items: center;
justify-content: center;
}
#header {
height: 90px;
top: 0;
position: sticky;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s;
}
#title {
width: 100%;
color: #fff;
transform: scale(2);
}
#content {
height: 1000px;
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<div id="inside">
<div id="header">
<h1 id="title">Title</h1>
</div>
</div>
<div id="content"></div>
</body>
接下来是完全相同的片段，但添加了一个：我应用了一个过滤器，就我而言，纯粹是装饰性的： filter: brightness(1.3); 。
正如您在下面看到的，当您在“动画”中滚动到一半时，标题就会消失。当您检查元素时，它仍然具有所有属性，但不知何故它消失了。这在 Firefox 和 Chrome 中是一样的，我不知道为什么。如果有人可以发布一个应用了过滤器的工作片段并解释为什么它以前不起作用，我将不胜感激。
$(window).scroll( () => {
"use strict";
let windowH = $(window).height();
let windowS = $(window).scrollTop();
let header = $("#header").height();
if (windowS < windowH-header) {
$("#title").css("transform", "scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
$("#header").css("transform", "translateY(0)");
$("#inside, #content").css({
"position": "static",
"margin-top": 0
});
} else {
$("#inside").css({
"position": "fixed",
"margin-top": -windowH+header
});
$("#content").css("margin-top", windowH);
}
$("#header").css("position", windowS > (windowH-header)/2 ? "fixed" :"static");
});
.fixed {
position: fixed!important;
}
.wrapper {
width: 100%;
text-align: center;
}
.wrapper:before {
display: table;
content: " ";
}
.wrapper:after {
clear: both;
}
#inside {
width: 100%;
height: 100vh;
background-color: lightcoral;
filter: brightness(1.3); /*<<<<<<<<<<<<<<<<*/
display: flex;
align-items: center;
justify-content: center;
}
#header {
height: 90px;
top: 0;
position: sticky;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s;
}
#title {
width: 100%;
color: #fff;
transform: scale(2);
}
#content {
height: 1000px;
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<div id="inside">
<div id="header">
<h1 id="title">Title</h1>
</div>
</div>
<div id="content"></div>
</body>
原文由 leonheess 发布，翻译遵循 CC BY-SA 4.0 许可协议
如果我们参考 规范，我们可以阅读：
这意味着您的
position:fixed元素将相对于过滤后的容器定位，而不是视口。换句话说，它仍然是固定的，但在它的 新 包含块（过滤容器）内这是一个简化版本来说明这个问题：
要解决此问题，请尝试将过滤器移动到固定元素而不是其容器：
这是一个非详尽的1属性列表，这些属性 导致为绝对定位和固定定位后代创建包含块
filtertransform参考backdrop-filter参考perspective参考contain参考transform-style参考content-visibility参考will-change与上述值之一一起使用时1 ：我会尽量保持这个列表是最新的。