我創(chuàng)建了一個(gè)簡(jiǎn)單的標(biāo)題。更準(zhǔn)確地說(shuō)，有兩個(gè)框（DIV）。它們都是標(biāo)題的一部分HEADER BOX 1 BOX 2我希望當(dāng)用戶向下滾動(dòng)時(shí)第一個(gè)框消失，但保持第二個(gè)框固定。第二個(gè)固定的盒子的高度也縮小了一點(diǎn)。問(wèn)題是我希望“內(nèi)容”標(biāo)題在第二個(gè)框縮小并固定時(shí)立即可見(jiàn)。然而，當(dāng)用戶向下滾動(dòng)更多時(shí)，我希望“內(nèi)容”標(biāo)題也與其他內(nèi)容一起消失在固定標(biāo)題下方。我想使用普通 JavaScript 來(lái)解決這個(gè)問(wèn)題。我想我的問(wèn)題的解決方案只是一個(gè)墊片，但我添加了它，但似乎不起作用。"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貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超7個(gè)贊
我認(rèn)為間距的想法可能是您的解決方案。您顯示的代碼中有兩個(gè)錯(cuò)誤：
.header-main.is-sticky + .main
沒(méi)有名為 main 的類，只有 html 標(biāo)簽<main>
使用上面的代碼行，即使使用
<main>，也不會(huì)影響主要元素。
.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 關(guān)注
- 181 瀏覽
添加回答
舉報(bào)
0/150
提交
取消