如何創建一個與CSS滾動縮小的粘性標頭？

使用position: sticky 實現粘性頭部；2. 現代CSS 可通過animation-timeline: view() 實現滾動時自動收縮，但瀏覽器支持有限；3. 生產環境中推薦結合JavaScript 監聽scroll 事件，當向下滾動超過50px 時添加.shrunk 類以縮小頭部，向上滾動時移除該類恢復原狀；4. 可選優化包括使用transform 或will-change 提升動畫性能，但需注意佈局影響；該方案兼容性好，效果流暢，適用於現代網頁設計。

Creating a sticky header that shrinks when the user scrolls down the page is a clean and modern UX pattern. You can achieve this effect using only CSS (with a bit of help from position: sticky and scroll-driven animations), though full support for advanced scroll-based effects may require considering browser compatibility.

Here's how to create a sticky header that shrinks on scroll using pure CSS , with a fallback-friendly approach.

✅ 1. Basic Sticky Header with Smooth Shrink on Scroll

We'll use position: sticky for the stickiness and CSS scroll-driven animations (via scroll-timeline and animation ) — a newer but elegant method. We'll also show a simpler alternative using JavaScript if needed.

HTML Structure

 <header class="sticky-header">
  <div class="header-content">
    <h1>My Website</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </div>
</header>

<!-- Page content to enable scrolling -->
<main>
  <p>Scroll down to see the effect...</p>
  <!-- Add more content to enable scrolling -->
  <div style="height: 200vh;"></div>
</main>

✅ 2. CSS: Sticky Shrink on Scroll (Modern CSS with Scroll Timeline)

This method uses CSS scroll-driven animations , which are supported in modern browsers like Chrome, Edge, and Firefox (with flags).

 .sticky-header {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 20px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: padding 0.3s ease;

  /* Define scroll timeline */
  animation-timeline: view();
  animation-name: shrink-header;
  animation-range: entry 0% cover 100%;
  animation-fill-mode: both;
  z-index: 1000;
}

.header-content h1 {
  margin: 0;
  font-size: 24px;
  transition: font-size 0.3s ease;
}

.header-content nav a {
  margin-left: 20px;
  font-size: 18px;
  color: #333;
  text-decoration: none;
  transition: font-size 0.3s ease;
}

/* Animation to shrink header */
@keyframes shrink-header {
  from {
    padding-block: 20px;
  }
  to {
    padding-block: 10px;
  }
}

/* Optional: shrink text as well */
.sticky-header:is(:state(shrunk)) .header-content h1 {
  font-size: 20px;
}

? Note : animation-timeline: view() creates a timeline based on the element's scroll position into the viewport. This is the key to scroll-linked animations in pure CSS.

However, browser support for animation-timeline and @scroll-timeline is still limited. For wider compatibility, use the JavaScript fallback below.

✅ 3. Fallback: Pure CSS Minimal JavaScript (Recommended for Production)

If you need broad browser support (Safari, older Chrome, etc.), combine CSS classes with a small JavaScript to detect scroll position.

Updated CSS

 .sticky-header {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 20px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: padding 0.3s ease;
  z-index: 1000;
}

.sticky-header.shrunk {
  padding: 10px;
}

.sticky-header.shrunk h1 {
  font-size: 20px;
}

.sticky-header.shrunk nav a {
  font-size: 16px;
}

JavaScript to Add the Class on Scroll

 const header = document.querySelector('.sticky-header');
let lastScrollTop = 0;

window.addEventListener('scroll', () => {
  const currentScrollTop = window.scrollY;

  // Only trigger when scrolling down
  if (currentScrollTop > lastScrollTop && currentScrollTop > 50) {
    header.classList.add('shrunk');
  } else {
    header.classList.remove('shrunk');
  }

  lastScrollTop = currentScrollTop;
});

? This approach is reliable and widely supported. The header shrinks when scrolling down past 50px and expands back when scrolling up.

✅ 4. Optional Enhancements

• Use will-change: transform or transform: scale() for smoother animations.
• Add requestAnimationFrame to optimize scroll performance.
• Debounce or throttle scroll events if needed.

Example with transform for smoother scaling:

 .sticky-header.shrunk {
  transform: scale(0.95);
  transform-origin: top center;
}

But be cautious — transform can affect layout. Stick to padding and font-size changes for safer results.

Summary

• Use position: sticky for stickiness.
• For modern browsers: try CSS scroll-driven animations ( animation-timeline: view() ).
• For production: use CSS transitions JavaScript to toggle a .shrunk class on scroll.
• Always test on mobile and different screen sizes.

Basically, it's a combo of sticky positioning, smooth transitions, and scroll detection — simple but effective.

以上是如何創建一個與CSS滾動縮小的粘性標頭？的詳細內容。更多資訊請關注PHP中文網其他相關文章！