我創建了一個簡單的標題。更準確地說，有兩個框（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 關注
- 169 瀏覽
添加回答
舉報
0/150
提交
取消