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.

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.

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 içerine jQuery.JS‘yi ekliyoruz. Hemen altına da jquery-stick.js dosyasını ekleyelim. Aşağıdaki kodu kullanabilirsiniz.

<script></script>
<script></script>

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

<script>$(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



Ş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.

Kaynak : http://www.adobewordpress.com/yapiskan-sticky-header-nasil-yapilir

Cidden güzel uygulama, eline sağlık.

Bende kendi blogumdaki menüye uyguladım :)

www.hitadam.com

Teşekkürler, Anlatımı uyguladım ancak herhangi bir değişiklik olmadı.
Dosyayı ana dizine attım.
Kodu header.php dosyasına tagının arasına ekledim.
<script></script>
<script></script>
Yaren teması kullanıyorum ve menüyü sabit tutmak istedim.

Düzenledim ve ekledim;
<script>$(document).ready(function() {$('#menu').scrollToFixed();});</script>

Nerede yanlış yapıyorum ?

Javascript dosyasının adı: jquery-sticky.js olacak. Kodun düzenlenmesi gerekiyor.
Ayrıca id yazdığım yerde başına nokta koyunca script çalışıyor ama bu seferde arka plan yapışkan olmadığı için menü tam görünmüyor.
<script>$(document).ready(function() {$('.menu').scrollToFixed();});</script>

@Orifame
Adımları doğru izlemişsiniz. İlk başta jQuery çakışması var sandım fakat sonrasında çözmüşsünüz sorunu. Arka plan ile işiniz yok ki. Ayrıca sitede menu id sine ait başka bir eleman olmadığına dikkat edin.

@Hit Adam
Güzel durmuş :)

sonunda düzgün bir şekilde yaptım.
<script>$(document).ready(function() {$(menu).scrollToFixed();});</script>
menü idini yazdığım kısmın sadece parantez içinde olması gerekiyormuş. Tırnak işareti, nokta ya da kare işareti olmamalı. Tekrar teşekkür ederim. Siz de bir kontrol edebilir misiniz ? Düzgün mü ?
www.oriuyelik.net

Bir sorun var. Aşağı inip tekrar yukarıya çıkınca bozuluyor.

Bir yerde menü id li nav'a top:139px tanımlanıyor otomatik olarak. O sorun yaratıyor.

evet sayfayı aşağıdan tekrar yukarıya çıkarınca olması gereken yerde durmuyor menü.

Teşekkürler güzel konu olmuş, eline sağlık. Kendi pc me girince hemen denemek istiyorum :)