我目前正在网站上,遇到这种奇怪的行为。我不确定这是一个错误还是如何解决它,所以我想向您寻求帮助。
因此,我有这个标题屏幕的“动画”,该标题的标题位于全屏页面的中央,当您向下滚动时,标题变小并保留在页面顶部。这是一个具有预期行为的工作示例,从中我剥离了所有不必要的代码以使其最小化:
$(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");
});
Run Code Online (Sandbox Code Playgroud)
.fixed {
position: fixed!important;
}
.wrapper {
width: 100%;
text-align: center;
}
.wrapper:before {
display: table;
content: " ";
}
.wrapper:after {
clear: both; …
Run Code Online (Sandbox Code Playgroud)