Üye Girişi
Bağlan Google+ ile Bağlan Facebook ile Bağlan
Yeni Kayıt
Tüm Forumlar
  • Tüm Forumlar
  • Web Tasarım - Programlama
  • Tasarım ve grafik
  • Web Tasarım ve Hazır Kodlar
  • Bu Konuda
Şimdi Ara

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

Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
2 Misafir (1 Mobil) - 1 Masaüstü, 1 Mobil
5 sn
10
Cevap
0
Favori
793
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
Konuya Özel
Öne Çıkar
0 oy
Sayfa: 1
Giriş
Mesaj
  • 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 nasıl yapılır?

    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 öğ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.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.

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



    _____________________________




  • Ne gerek var bu kadar uğraşmaya position:fixed de olsun bitsin
    _____________________________
  • quote:

    Orijinalden alıntı: Glukhovsky

    Ne gerek var bu kadar uğraşmaya position:fixed de olsun bitsin

    Makaleyi okumadınız sanırım. Position:fixed derseniz eğer sabitlemek istediğiniz öğe en üstte değilse bulunduğu yere çakılı kalır, yani sitenin üstüne yaslanmaz. Deneyin görün.
    _____________________________
  • quote:

    Orijinalden alıntı: Response.Write

    quote:

    Orijinalden alıntı: Glukhovsky

    Ne gerek var bu kadar uğraşmaya position:fixed de olsun bitsin

    Makaleyi okumadınız sanırım. Position:fixed derseniz eğer sabitlemek istediğiniz öğe en üstte değilse bulunduğu yere çakılı kalır, yani sitenin üstüne yaslanmaz. Deneyin görün.

    posdition:fixed; top:0;
    _____________________________
  • quote:

    Orijinalden alıntı: Glukhovsky

    quote:

    Orijinalden alıntı: Response.Write

    quote:

    Orijinalden alıntı: Glukhovsky

    Ne gerek var bu kadar uğraşmaya position:fixed de olsun bitsin

    Makaleyi okumadınız sanırım. Position:fixed derseniz eğer sabitlemek istediğiniz öğe en üstte değilse bulunduğu yere çakılı kalır, yani sitenin üstüne yaslanmaz. Deneyin görün.

    posdition:fixed; top:0;

    Ya sabitlemek istediğiniz öğe sayfanın en üsttünde (top:0) değilse?
    Sticky header'ın ne olduğunu idrak ettiğinizi düşünmüyorum. Örneği görüntüleyin ve oradan jQuery kodlarını silerek aradaki farkı görün derim.

    position:fixed tek başına yetersiz bu işlem için.
    _____________________________




  • quote:

    Orijinalden alıntı: Response.Write

    quote:

    Orijinalden alıntı: Glukhovsky

    quote:

    Orijinalden alıntı: Response.Write

    quote:

    Orijinalden alıntı: Glukhovsky

    Ne gerek var bu kadar uğraşmaya position:fixed de olsun bitsin

    Makaleyi okumadınız sanırım. Position:fixed derseniz eğer sabitlemek istediğiniz öğe en üstte değilse bulunduğu yere çakılı kalır, yani sitenin üstüne yaslanmaz. Deneyin görün.

    posdition:fixed; top:0;

    Ya sabitlemek istediğiniz öğe sayfanın en üsttünde (top:0) değilse?
    Sticky header'ın ne olduğunu idrak ettiğinizi düşünmüyorum. Örneği görüntüleyin ve oradan jQuery kodlarını silerek aradaki farkı görün derim.

    position:fixed tek başına yetersiz bu işlem için.

    Top'u ona göre ayarlarsınız. Bazı kullanıcılar veya tarayıcılar scriptleri kapatabiliyor ayrıca performans olarakta olumsuz etkiler. Sizin yönteminiz daha etkilidir doğru ama mümkün olduğunca Js yerine Css kullanmak daha iyidir.
    _____________________________




  • quote:

    Orijinalden alıntı: Glukhovsky

    quote:

    Orijinalden alıntı: Response.Write

    quote:

    Orijinalden alıntı: Glukhovsky

    quote:

    Orijinalden alıntı: Response.Write

    quote:

    Orijinalden alıntı: Glukhovsky

    Ne gerek var bu kadar uğraşmaya position:fixed de olsun bitsin

    Makaleyi okumadınız sanırım. Position:fixed derseniz eğer sabitlemek istediğiniz öğe en üstte değilse bulunduğu yere çakılı kalır, yani sitenin üstüne yaslanmaz. Deneyin görün.

    posdition:fixed; top:0;

    Ya sabitlemek istediğiniz öğe sayfanın en üsttünde (top:0) değilse?
    Sticky header'ın ne olduğunu idrak ettiğinizi düşünmüyorum. Örneği görüntüleyin ve oradan jQuery kodlarını silerek aradaki farkı görün derim.

    position:fixed tek başına yetersiz bu işlem için.

    Top'u ona göre ayarlarsınız. Bazı kullanıcılar veya tarayıcılar scriptleri kapatabiliyor ayrıca performans olarakta olumsuz etkiler. Sizin yönteminiz daha etkilidir doğru ama mümkün olduğunca Js yerine Css kullanmak daha iyidir.

    Sticky Header'ı bütün tasarım alemi kullanıyor. Performans kaybı da sandığınız kadar yaşatmaz. Scroll'un seviyesine göre otomatik top değeri atar. Lütfen biraz araştırın. Şuan gereksiz bir tartışma içerisindesiniz.
    _____________________________




    • Yapay Zeka’dan İlgili Konular
    AHCI mod nasıl yapılır
    14 yıl önce açıldı
    Fan göbeği nasıl yuvasından çıkar ? [ Resimli kaynak Anlatım rachadell]
    18 yıl önce açıldı
    XSS (Cross Site Scripting) Saldırıları sadece kullanıcınını penceresini kapsamaz mı?
    13 yıl önce açıldı
    Daha Fazla Göster
  • İkisi birbirinden farklı, arkadaş örneğe bakmadan cevap vermiş sanırsam. Açıklayıcı bir yazı olmuş.
    _____________________________
    İndirimi Takip
  • Response.Write kullanıcısına yanıt
    öncelikle paylaşım için teşekkürler. daha iyi anlamam için sticky header'ın kullanıldığı birkaç örnek verebilir misin?
    _____________________________
  • quote:

    Orijinalden alıntı: ysfbkrcn

    öncelikle paylaşım için teşekkürler. daha iyi anlamam için sticky header'ın kullanıldığı birkaç örnek verebilir misin?

    Yukarıda örneği test et isimli bir link mevcut zaten. ayrıca kaynak linkteki sayfa da kullanıyor.
    Konuyu okuyalım
    _____________________________
    • 
Sayfa: 1

Benzer içerikler

- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.
Hizmet kalitesi için çerezleri kullanabiliriz, DH'yi kullanırken depoladığımız çerezlerle ilgili veri politikamıza gözatın.
Kabul Ediyorum