如何使我的垫片在固定接头中工作？
我创建了一个简单的标题。更准确地说，有两个框（DIV）。它们都是标题的一部分
HEADER
BOX 1
BOX 2
我希望当用户向下滚动时第一个框消失，但保持第二个框固定。第二个固定的盒子的高度也缩小了一点。
问题是我希望“内容”标题在第二个框缩小并固定时立即可见。然而，当用户向下滚动更多时，我希望“内容”标题也与其他内容一起消失在固定标题下方。
我想使用普通 JavaScript 来解决这个问题。我想我的问题的解决方案只是一个垫片，但我添加了它，但似乎不起作用。
"use strict";
const header = document.querySelector(".header-main");
const sticky = header.offsetTop;
window.addEventListener("scroll", event => {
if (window.pageYOffset > sticky) {
header.classList.add("is-sticky");
header.style.height = "70px";
} else {
header.classList.remove("is-sticky");
header.style.height = "100px";
}
});
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
p {
margin: 0;
}
.header-above {
background: lightseagreen;
color: #fff;
height: 100px;
}
.header-main {
background: #0A246A;
color: #fff;
height: 100px;
transition: all 0.2s linear;
}
.header-main.is-sticky {
position: fixed;
top: 0;
width: 100%;
}
.header-main.is-sticky + .main {
padding-top: 120px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="fixed-header-plusabove.css">
<title>Fixed Header Plus Above</title>
</head>
<body>
<header class="header">
<div class="header-above">
<div class="header-above-container">
<p>Header Above Container</p>
</div>
</div>
<div class="header-main">
<div class="header-main-container">
<p>Header main</p>
</div>
</div>
</header>
<main>
<h1>Content</h1>
<script>
for (let i = 0; i < 100; i++) {
document.write("<p>Some text...</p>");
}
</script>
</main>
<script src="fixed-header-plusabove.js"></script>
</body>
</html>
慕娘93253241回答
-
芜湖不芜
我认为间距的想法可能是您的解决方案。您显示的代码中有两个错误：.header-main.is-sticky + .main没有名为 main 的类，只有 html 标签<main>使用上面的代码行，即使使用<main>，也不会影响主要元素。.is-sticky如果您向父类添加类似的类，header.header您可以使用如下代码行：header.header.is-sticky + main"use strict";const parentHeader = document.querySelector(".header");const header = document.querySelector(".header-main");const sticky = header.offsetTop;window.addEventListener("scroll", event => { if (window.pageYOffset > sticky) { header.classList.add("is-sticky"); parentHeader.classList.add("is-sticky"); header.style.height = "70px"; } else { header.classList.remove("is-sticky"); parentHeader.classList.remove("is-sticky"); header.style.height = "100px"; }});:root { box-sizing: border-box;}*,*::before,*::after { box-sizing: inherit;}body { margin: 0; padding: 0;}p { margin: 0;}.header-above { background: lightseagreen; color: #fff; height: 100px;}.header-main { background: #0A246A; color: #fff; height: 100px; transition: all 0.2s linear;}.header-main.is-sticky { position: fixed; top: 0; width: 100%;}header.header.is-sticky + main { padding-top: 120px;}<header class="header"> <div class="header-above"> <div class="header-above-container"> <p>Header Above Container</p> </div> </div> <div class="header-main"> <div class="header-main-container"> <p>Header main</p> </div> </div> </header> <main> <h1>Content</h1> <script> for (let i = 0; i < 100; i++) { document.write("<p>Some text...</p>"); } </script> </main> <script src="fixed-header-plusabove.js"></script>
随时随地看视频慕课网APP
相关分类
Html5