Sticky Header

Yapışkan (Sticky) header nasıl yapılır?

Günümüz tasarımlarının en popüler öğelerinden olan yapışkan (sticky) header nasıl hazırlanır? Eğer bu soru sizin de aklınızı kurcalıyorsa doğru yerdesiniz.

ÖRNEĞİ GÖRÜNTÜLE

Yapışkan (Sticky) header

Temel mantığı CSS‘in position:fixed elemanına dayanır. Eğer yapışkan yapacağınız öğe sitenizin en üstündeyse sadece fixed tanımlamasıyla tasarımınızı tamamlayabilirsiniz. Fakat bizim üst taraftaki menübarımız gibi en üstte olmayan bir öğeyi sabitleştirmek istiyorsanız jQuery‘den yardım almanız gerekiyor.

Sticky Header

Bu sizi korkutmasın. jQuery’i sadece kaydırma çubuğunun pozisyonunu ölçmek ve CSS ile atayacağımız top elemanını dengelemek için kullanacağız.

jQuery ile birlikte çalışan sticky dosyasını sizler için birleştirdik. Aşağıdaki dosyayı indirerek gerekli JavaScript kodlarına erişebilirsiniz.

Dosya adı : jquery-stick.zip

Zip şifresi : adobewordpress.com

Nasıl yapılır?

Üstteki dosyayı indirdiyseniz işleme başlayabiliriz. Yukarıdan aşağıya doğru inerek yapışkan headerı oluşturalım.

İlk olarak <head></head> içerine jQuery.JS‘yi ekliyoruz. Hemen altına da jquery-stick.js dosyasını ekleyelim. Aşağıdaki kodu kullanabilirsiniz.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery-stick.js"></script>

Şimdi bu iki tanımlamanın altına sabitlemek istediğimiz öğeyi belirteceğiz.

<script type="text/javascript">$(document).ready(function() {$('#header').scrollToFixed();});</script>

Sizin de fark edeceğiniz gibi header isimli id’ye sahip olan elemanı sabitliyoruz bu kod ile. Siz o kısma sabitleyeceğiniz öğenin id bilgisini girin.

Örneklendirelim

<nav id="sticky">Burada menü var</nav>

Şeklinde bir menü sabitleyecek olsaydık o kısma #sticky yazardık.

İşlem bu kadar. Hazırladığınız çalışmayı test edebilirsiniz.

Kapanış

Bu makale neredeyse 1.5 aydır arşivimizde beklemekteydi. Aynı tekniği Adobewordpress üzerinde kullanırken jQuery kategorimizde sticky header örneklendirmesinin olmadığı fark ettik. Bir şekilde unutulmuş.

İyi çalışmalar.



  • Kurtulus Özberk

    Bu headerı çok araştırdım ama karışık geldi. Sayenizde yaptım. Teşekkürler.

  • webalet

    Nereye eklenecek resimle gösterirmisiniz 🙂

  • Serkan

    Paylaşımiçin teşekkürler. Minik bir düzeltme yapmalıyız: kopyala yapıştır ile dosyayı çalıştırmaya çalışanlar hata alacaktır, sebebi eksik bir harfin yazılmış olması.

    Buradaki stick kısmını sticky olarak değiştirmelisiniz.

  • kemal

    çok güzel hazırlanmış. ancak ben bunu footer a uygulamak istiyorum. bunu footer a nasıl uygularız?

  • Bruno

    Teşekkürler. Bende bunu arıyordum.

  • kolonto

    Güzel bir konu ama başlangıç noktasını ayarlayamadığım için işime yaramıyor. Yani nerede açılacağını nasıl ayarlayabiliriz

  • Raşit

    biraz daha ayrıntılı anlatsanız çok daha iyi olurdu aslında.. yapamadım 🙁

  • ramazan

    site süper takipteyim bende heryerde bunu aryıyorum

  • yiğit

    çalışma gerçekten güzel olmuş teşekkürler, iyi çalışmalar.

  • DDL

    aşağı kaydırınca css kodlarında değişikliği nasıl yapacağız?

  • Osman

    Teşekkürle fakat yapamadım. Bu arada iletişim formunuz kullanılamıyor.

  • Ömer

    Çok teşekkürler internetde ki en basit anlatım işe yaradı

  • enes

    Merhaba bende denedim ama küçük bi sorunum var yardımcı olurmsunuz?