我创建了一个简单的标题。更准确地说，有两个框（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>
1 回答
芜湖不芜
TA贡献1796条经验 获得超7个赞
我认为间距的想法可能是您的解决方案。您显示的代码中有两个错误：
.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>
- 1 回答
- 0 关注
- 103 浏览
添加回答
举报
0/150
提交
取消