Bagaimana untuk membuat header melekit yang menyusut pada tatal dengan CSS?

Gunakan kedudukan: melekit untuk mencapai kepala melekit; 2. CSS moden secara automatik boleh mengecut apabila menatal melalui animasi-masa: Lihat (), tetapi sokongan penyemak imbas adalah terhad; 3. Adalah disyorkan untuk menggabungkan JavaScript untuk mendengar acara tatal dalam persekitaran pengeluaran. Apabila menatal ke bawah melebihi 50px, tambah kelas. 4. Pengoptimuman pilihan termasuk menggunakan transformasi atau perubahan untuk meningkatkan prestasi animasi, tetapi memberi perhatian kepada kesan susun atur; Penyelesaian ini mempunyai keserasian yang baik dan hasil yang lancar, dan sesuai untuk reka bentuk web moden.

Mewujudkan tajuk melekit yang mengecut apabila pengguna menatal ke bawah halaman adalah corak UX yang bersih dan moden. Anda boleh mencapai kesan ini hanya menggunakan CSS (dengan sedikit bantuan dari position: sticky dipandu dan tatal), walaupun sokongan penuh untuk kesan berasaskan tatal lanjutan mungkin memerlukan mempertimbangkan keserasian penyemak imbas.

Berikut adalah cara untuk membuat tajuk melekit yang mengecut pada tatal menggunakan CSS tulen , dengan pendekatan yang mesra.

✅ 1. Header Sticky Basic dengan mengecut lancar pada tatal

Kami akan menggunakan position: sticky untuk Stickiness dan CSS Scroll-Driven Animations (melalui scroll-timeline dan animation )-kaedah yang lebih baru tetapi elegan. Kami juga akan menunjukkan alternatif yang lebih mudah menggunakan JavaScript jika diperlukan.

Struktur HTML

 <header class = "sticky-header">
  <div class = "header-content">
    <h1> Laman web saya </h1>
    <av>
      <a href = "#"> home </a>
      <a href = "#"> tentang </a>
      <a href = "#"> Hubungi </a>
    </nav>
  </div>
</header>

<!-Kandungan halaman untuk membolehkan menatal->
<tain>
  <p> tatal ke bawah untuk melihat kesannya ... </p>
  <!-tambah lebih banyak kandungan untuk membolehkan Scrolling->
  <div style = "Height: 200vh;"> </div>
</main>

✅ 2. CSS: Sticky Shrink on Scroll (CSS moden dengan garis masa tatal)

Kaedah ini menggunakan animasi yang didorong oleh CSS , yang disokong dalam pelayar moden seperti Chrome, Edge, dan Firefox (dengan bendera).

 .sticky-header {
  Kedudukan: melekit;
  Atas: 0;
  Latar Belakang: #ffff;
  Padding: 20px 10px;
  box-shadow: 0 2px 10px rgba (0, 0, 0, 0.1);
  Peralihan: padding 0.3s mudah;

  / * Tentukan garis masa tatal */
  Animasi-masa: Lihat ();
  Nama Animasi: Shrink-Header;
  Animasi-Range: Entry 0% Cover 100%;
  Animasi-Fill-Mode: Kedua-duanya;
  Z-indeks: 1000;
}

.header-Content H1 {
  Margin: 0;
  saiz font: 24px;
  Peralihan: Saiz fon 0.3s mudah;
}

.Header-Content Nav A {
  margin-kiri: 20px;
  saiz font: 18px;
  Warna: #333;
  Teks-penyerapan: Tiada;
  Peralihan: Saiz fon 0.3s mudah;
}

/ * Animasi untuk mengecut header */
@KeyFrames mengecut-header {
  dari {
    Padding-block: 20px;
  }
  ke {
    Padding-block: 10px;
  }
}

/ * Pilihan: mengecut teks juga */
.sticky-header: IS (: state (shrunk)) .header-content H1 {
  saiz font: 20px;
}

? Nota : animation-timeline: view() Membuat garis masa berdasarkan kedudukan tatal elemen ke dalam viewport. Ini adalah kunci kepada animasi berkaitan tatal dalam CSS tulen.

Walau bagaimanapun, sokongan penyemak imbas untuk animation-timeline dan @scroll-timeline masih terhad. Untuk keserasian yang lebih luas, gunakan JavaScript Fallback di bawah.

✅ 3. Fallback: JavaScript minimum CSS minimum (disyorkan untuk pengeluaran)

Jika anda memerlukan sokongan penyemak imbas yang luas (safari, krom yang lebih tua, dan lain -lain), menggabungkan kelas CSS dengan JavaScript kecil untuk mengesan kedudukan tatal.

CSS yang dikemas kini

 .sticky-header {
  Kedudukan: melekit;
  Atas: 0;
  Latar Belakang: #ffff;
  Padding: 20px 10px;
  box-shadow: 0 2px 10px rgba (0, 0, 0, 0.1);
  Peralihan: padding 0.3s mudah;
  Z-indeks: 1000;
}

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

.Sticky-Header.Shrunk H1 {
  saiz font: 20px;
}

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

Javascript untuk menambah kelas pada tatal

 header const = document.QuerySelector ('. Sticky-header');
Biarkan LastScrollTop = 0;

window.addeventListener ('tatal', () => {
  const currentscrollTop = window.scrolly;

  // hanya mencetuskan semasa menatal ke bawah
  jika (currentscrollTop> lastscrollTop && currentscrollTop> 50) {
    header.classlist.add ('shrunk');
  } else {
    header.classlist.remove ('shrunk');
  }

  lastScrollTop = currentscrollTop;
});

? Pendekatan ini boleh dipercayai dan disokong secara meluas. Header menyusut ketika menatal ke 50px lalu dan mengembang kembali ketika menatal.

✅ 4. Peningkatan pilihan

• Gunakan will-change: transform atau transform: scale() untuk Animasi Lancar.
• Tambah requestAnimationFrame untuk mengoptimumkan prestasi tatal.
• Debounce atau tatal tatal throttle jika diperlukan.

Contoh dengan transform untuk Skaling Smoother:

 .sticky-header.shrunk {
  Transform: Skala (0.95);
  Transform-Origin: Pusat Atas;
}

Tetapi berhati -hati - transform boleh menjejaskan susun atur. Melekat pada padding dan perubahan font-size untuk hasil yang lebih selamat.

Ringkasan

• Gunakan position: sticky untuk keletihan.
• Untuk penyemak imbas moden: Cuba animasi yang didorong oleh CSS ( animation-timeline: view() ).
• Untuk pengeluaran: Gunakan peralihan CSS JavaScript untuk bertukar -tukar kelas .shrunk pada tatal.
• Sentiasa menguji saiz skrin mudah alih dan berbeza.

Pada asasnya, ia adalah kombo kedudukan melekit, peralihan lancar, dan pengesanan tatal - mudah tetapi berkesan.

Atas ialah kandungan terperinci Bagaimana untuk membuat header melekit yang menyusut pada tatal dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!