<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;
  }
}
View Compiled
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.

External JavaScript

  1. https://unpkg.co/[email protected]/dist/gsap.min.js
  2. https://unpkg.com/[email protected]/dist/ScrollTrigger.min.js