<div class="header">Header</div>body {
margin: 0;
padding: 0;
min-height: 200vh;
}
.header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: skyblue;
color: #fff;
text-align: center;
transition: height ease-out 0.4s;
&-scrolled {
height: 40px;
}
}
ScrollTrigger.create({
markers: true,
trigger: document.body,
start: "1px top",
end: document.body.innerHeight,
toggleClass: { className: "header-scrolled", targets: ".header" }
});
//リサイズがあったらScrollTriggerをリセットする（innerHeightが変わっている可能性があるため）
window.addEventListener("resize", () => {
ScrollTrigger.refresh();
});
External CSS
This Pen doesn't use any external CSS resources.