CSS yapışkan header yapımı

Bu yazı 2016 yılından. Anlatılan sürümler, fiyatlar ve adresler o günden bu yana değişmiş olabilir.

Responsive tasarımların vazgeçilmezlerinden biri olan, sayfayı aşağı kaydırdığınızda üstte sabit kalan yapışkan (sticky) header'ı nasıl yapacağımızı anlatacağım. Güzel haber şu: eskiden bunun için JavaScript gerekiyordu, artık saf CSS ile tek satırda halledebiliyoruz.

En kolay yol: position: sticky

Header'ınıza sadece şu iki satırı eklemeniz yeterli:

CSS

header {
    position: sticky;
    top: 0;
}

position: sticky elementi normal akışında durdurur, ama sayfayı kaydırdıkça top: 0 noktasına gelince orada "yapışıp" kalır. Hiçbir JavaScript, hiçbir kütüphane gerekmez; bütün güncel tarayıcılar destekler.

Tam çalışan basit bir örnek:

HTML

<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<style>
  body { margin: 0; font-family: sans-serif; }
  header {
    position: sticky;
    top: 0;
    background: #335C7D;
    color: #fff;
    text-align: center;
    font-size: 24px;
    line-height: 60px;
  }
  .icerik { height: 2000px; padding: 20px; }
</style>
</head>
<body>
  <header>Yapışkan Header</header>
  <div class="icerik">Sayfayı aşağı kaydırın, header üstte sabit kalacak.</div>
</body>
</html>

İsterseniz: kaydırınca küçülen header

Header'ın yapışık kalmasının yanında, sayfa kaydırılınca biraz küçülmesini de isteyebilirsiniz (büyük başlar, kaydırınca incelir). Bu görsel efekt için küçük bir JavaScript gerekiyor. Sayfa belli bir miktar kaydırılınca header'a bir sınıf ekliyoruz, CSS gerisini transition ile yumuşakça hallediyor:

CSS

header {
    position: sticky;
    top: 0;
    height: 108px;
    line-height: 108px;
    font-size: 48px;
    background: #335C7D;
    color: #fff;
    text-align: center;
    transition: all 0.4s ease;   /* küçülme yumuşak olsun */
}

/* kaydırınca eklenecek hal */
header.kucuk {
    height: 48px;
    line-height: 48px;
    font-size: 24px;
    background: #efc47D;
}

HTML

<script>
  const header = document.querySelector('header');
  window.addEventListener('scroll', () => {
    header.classList.toggle('kucuk', window.scrollY > 1);
  });
</script>

Eskiden bu iş için jQuery kullanılırdı; artık yukarıdaki gibi birkaç satır sade JavaScript yeterli, ayrıca bir kütüphane yüklemenize gerek yok. Sadece yapışkanlık istiyorsanız ilk yöntemdeki iki satır zaten yetiyor.