Yukarı Scroll Edildiğinde Gözüken Header

Adobewordpress alarak bir süre önce “Sticky Header” yapımı üzerine detaylı bir makale hazırlamıştık. Bugün de yine benzer bir yapı kullanarak kaydırma çubuğu yukarı sürüklendiğinde beliren bir header tasarlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

Yukarı Scroll Edildiğinde Gözüken Sticky Header

Kaydırma çubuğu yukarı sürüklendiğinde gözüken header temelinde kullanıcı deneyimini hedef almaktadır. Eski tasarım trendlerinde, üst kısımdaki headera erişmek için sayfanın en üstüne çıkardık. Bu algı zamanla benliklerimizde yer etti. Sticky headerın da popülerleşmesiyle birlikte bazı tasarımcılar bu algıyı kullanarak sadece yukarı scroll edildiğinde gözüken headerlar tasarlamaya başladı. Böylece hem mobilde sürekli ekranı takip eden bir jQuery yükünü sırtlamamış oldular hem de özgün bir tasarım meydana çıkardılar. Özetle scroll-to-top (yukarı çık) geleneğini bitirdiler.

Peki bu tasarım nasıl hazırlanır?

HTML ve CSS‘in yanısıra jQuery desteğine de ihtiyacımız olacak. İlk olarak HTML kodlarımız ile başlayalım.

HTML Kodları

Web sayfanızdaki header öğesine yapiskan classını eklemeniz yeterli.

<header class="yapiskan">STICKY HEADER</header>

CSS Kodları

Şimdi de yapiskan tanımını detaylandıralım. İlk olarak fixed pozisyonlama yaptığımız öğeyi left ve top tanımlamalarıyla üste yerleştirelim. CSS transition ile de giriş ve çıkışlardaki animasyon geçişlerini oluşturalım.

.yapiskan{
  position: fixed; 
  left:0; 
  top:0; 
  width:100%; 
  transition: top .5s;
}

Şimdi de yukarı scroll edilmesi halinde aktif edilecek classları ekleyelim.

.gizle {
  top: -89px;
}

.sabit {
  top:0;
  z-index: 9999;
}

Sırada işlevselliği katacak jQuery kodlarımız var.

jQuery Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

İşin jQuery tarafında yapmamız gereken ilk işlem scroll seviyesini bulmak. Daha sonra da scroll edilmesi halinde .yapiskan‘a sabit ve gizle classlarını eklememiz gerekiyor.

$(function(){	
    var cubuk_seviye = $(document).scrollTop();
    var header_yuksekligi = $('.yapiskan').outerHeight();

    $(window).scroll(function() {
        var kaydirma_cubugu = $(document).scrollTop();

        if (kaydirma_cubugu > header_yuksekligi){$('.yapiskan').addClass('gizle');} 
        else {$('.yapiskan').removeClass('gizle');}

        if (kaydirma_cubugu > cubuk_seviye){$('.yapiskan').removeClass('sabit');} 
        else {$('.yapiskan').addClass('sabit');}				

        cubuk_seviye = $(document).scrollTop();	
     });
});

Bu kadar.

Kaydırma çubuğu yukarı sürüklendiğinde beliren header öğemiz artık hazır.