- Katılım
- 28 Mayıs 2013
- Mesajlar
- 190
- Reaction score
- 1
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ığı CSSin 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 jQueryden yardım almanız gerekiyor.
Bu sizi korkutmasın. jQueryi sadece kaydırma çubuğunun pozisyonunu ölçmek ve öğemesine 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.JSyi ekliyoruz. Hemen altına da jquery-stick.js dosyasını ekleyelim. Aşağıdaki kodu kullanabilirsiniz.
HTML:
<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.
HTML:
<script type="text/javascript">$(document).ready(function() {$('#header').scrollToFixed();});</script>Sizin de fark edeceğiniz gibi header isimli idye sahip olan elemanı sabitliyoruz bu kod ile. Siz o kısma sabitleyeceğiniz öğenin id bilgisini girin.
Örneklendirelim
HTML:
<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.
Kaynak : http://www.adobewordpress.com/yapiskan-sticky-header-nasil-yapilir