Yapışkan Web Sitesi Başlığı Nasıl Oluşturulur

Bir kullanıcı kaydırdığında yerinde kalan web sitesi başlıkları çok popüler bir tasarım öğesi haline geldi. Kullanıcının farklı bir sayfa veya seçenek seçmek istediğinde yukarı kaydırmaya gerek kalmadan navigasyona kolayca erişmesini sağlar.

Bu işleve sahip öğeler, genellikle "yapışkan" olarak adlandırılır çünkü bunlar, kullanıcıyla birlikte web sitesinde gezinirken görünür kalırlar. Bir kullanıcı web sitesine ilk geldiğinde, öğeler başlangıç ​​konumunda olacak, ancak daha sonra yapışkan başlık aynı yerde kalacaktır.

Navigasyon bir web sitesinin en önemli unsurlarından biri olduğundan, bu yaklaşımın benimsenmesi navigasyonun daha erişilebilir olmasına yardımcı olur. Yerinde kalan bir navigasyona sahip olmak, son derece önemli olan web sitesi içeriğinde gezinirken kullanıcı için kolay bir akış sağlar.

Yapışkan gezinme öğeleri, insanlar web sitenizde gezinirken kolay bir kullanıcı akışı oluşturmanıza yardımcı olur.

Onu Yapışkan Yapan Nedir?

Sabit konumlandırma, navigasyonun yerinde kalmasını sağlamak için önemli bir bileşendir. Bu sabit konum öğesi, görüntü alanına veya tarayıcı penceresinin kendisine göre konumlandırılır. Site kaydırıldığında görünüm değişmediğinden, bu sabit konumlu öğe sayfa kaydırıldığında aynı yerde kalacaktır.

Not: Canlı Sitenizde Bunu Denemeyin

Unutmayın: Hiçbir şeyin bozulmadığından emin olmak için canlı sitenizdeki kodu asla doğrudan değiştirmemelisiniz. Ücretsiz yerel geliştirme uygulamamız Local, bu öğreticiyi güvenle takip edebileceğiniz bir test ortamı oluşturmanıza yardımcı olacaktır.

Navigasyonun Tek Bir Yerde Kalmasını Nasıl Sağlarız?

Gezinmeyi yapışkan hale getirmek daha kolay olamazdı; sadece CSS stiliyle yapılır. Temel olarak şöyle bir şeye benziyor:

 [css]

.navbar-sabit-üst {

pozisyon: sabit;

sağ: 0;

sol: 0;

z-endeksi: 999;

}

[/css]

Sayfanız ne kadar uzun olursa olsun veya ne kadar yukarı ve aşağı kaydırırsanız kaydırın, gezinti sayfanın üst kısmına "sıkışmış" olacaktır. Gezinme için yerleşimi oluşturan gezinmeye .navbar-fixed-top adlı bir sınıf eklendi. Bu sınıfı nav etiketine ekledim. Konum sabit olarak ayarlanmıştır ve sol ve sağ konumlandırmanın eklenmesi yerleşimin doğru olmasını ve sayfanın tüm genişliğini kaplamasını sağlar.

Unutmayın, bu sınıf ne zaman uygulanırsa uygulansın, elemanın sabit konumunu oluşturacaktır. Büyük olasılıkla bu sınıf yalnızca bir kez uygulanacaktır, aksi takdirde aynı yerde aynı şekilde davranan ve karışık bir karmaşa yaratan birden fazla sayfa öğesi olacaktır.

Bir diğer önemli husus z-endeksidir. Navigasyonun her zaman görünür olmasını istediğimiz için, diğer öğeler tarafından üst üste gelmediğinden emin olmamız gerekir. z-index başvurduğumuzda, belirli öğelerin yığın sırasını ayarlayan CSS özelliğinden bahsediyoruz. Daha büyük yığın sırasına sahip bir öğe, her zaman daha düşük yığın sırasına sahip başka bir öğenin önündedir. 999 değeri büyük bir sayıdır ve navigasyon için güvenli bir bahistir.

Sayfa Gövdesini Ayarla

Gezinme artık sabit bir konumda olduğundan, üst kısımdaki içeriğin bir kısmını kapsayacaktır. Bunun için basit bir düzeltme var. Gövdenin üst kısmına dolgu eklemek, sayfayı aşağı itecektir, böylece kullanıcı sayfaya geldiğinde üst kısımdaki içerik başlık tarafından kapatılmayacaktır.
CSS dosyanızdaki gövdeye dolgu ekleyebilirsiniz:

 [css]

vücut {

üst dolgu: 75 piksel;

}

[/css]

Sabit başlığın ne kadar kalın olduğuna bağlı olarak dolgunuzun daha büyük veya daha küçük olabileceğini unutmayın.

Yapışkan Başlığın Yumuşacık Hale Getirilmesi

Bir kullanıcı kaydırarak belirli bir noktayı geçtiğinde incelen ve yumuşacık görünmesine neden olan bir başlık bulmak yaygın bir durumdur. Gezinme boyutu küçüldüğünde, kullanıcıya ana web sitesi içeriğini görmesi için daha fazla alan sağlamaya yardımcı olur. Bu, özellikle daha küçük cihazlarda yararlıdır. Bunu gerçekleştirmek için bir CSS ve JavaScript kombinasyonu kullanacağız.

AnimatedHeader Komut Dosyası ile Yumuşacık Gezinme

Kaydırma sırasında boyutunu değiştirecek animasyonlu bir başlık eklemek için, gezinmeyi yumuşak hale getirmek için harika, hafif bir çözüm var. Buna AnimatedHeader denir. MIT lisansına sahiptir, bu nedenle kişisel veya ticari projeler için kullanılabilir. Bu dosyaları almak için GitHub'da AnimatedHeader'a göz atın.

Navigasyon için temel CSS

İki önemli CSS stiline bir göz atalım. İlki muhtemelen size tanıdık geliyor, .navbar-fixed-top yapışkan gezinme için yüksekliğimizi, genişliğimizi ve sabit konumumuzu belirtir. Aşağıda, 75px yüksekliğini belirten başka bir sınıfın eklendiğini görebilirsiniz. Bu "ezilmiş" boyuttur.

 [css]

.navbar-sabit-üst {
pozisyon: sabit;
üst: 0;
sol: 0;
genişlik: %100;
arka plan: #f6f6f6;
z-endeksi: 999;
yükseklik: 90 piksel;
taşma: gizli;
-webkit-geçiş: yükseklik 0.3s;
-moz-geçiş: yükseklik 0.3s;
geçiş: yükseklik 0,3 sn;
}

.navbar-fixed-top.cbp-af-header-shrink {
yükseklik: 75 piksel;
}

[/css]

Boyutu değiştirmek için, .cpb-af-header-shrink sınıfını eklemek için JavaScript kullanılır. Komut dosyasının bunu sağlayan kısmına bir göz atalım:

 [javascript]

işlev scrollPage() {
var sy = scrollY();
if ( sy >= changeHeaderOn ) {
classie.add(başlık, 'cbp-af-başlık-küçült');
}
başka {
classie.remove(başlık, 'cbp-af-başlık-küçült');
}
didScroll = yanlış;
}

[/javascript]

Bir hatırlatma, komut dosyasında daha fazlası var, bu nedenle tüm bileşenlere sahip olmak için kaynak kodunu indirdiğinizden emin olun. Gördüğünüz gibi, kullanıcı kaydırma yaparak belirli bir noktayı geçtikten sonra .cpb-af-header-shrink sınıfı ekleniyor. Kullanıcı sayfayı geri kaydırırsa, bu sınıf kaldırılır.

CSS Yapışkan Konumlandırma Seçeneği

Daha az güçlük çekebilecek bir seçenek de var. Tasarladığınız tarayıcı desteğine bağlı olarak, position: sticky; yapışkan bir başlık oluşturmayı çok basit hale getirir. Tarayıcı desteği fena değil ama tamamen küresel de değil. Yapışkan ilan ettiğinizde önekler kullanılabilir. Daha fazla ayrıntı için Kullanabilir miyim bölümüne bakın.

Yapışkan konumlandırmayı tanımlamanın basit bir yolu, göreli ve sabit konumlandırmanın bir kombinasyonu olmasıdır. Yapışkan konumlandırmayla biraz karşılaştığınızı tahmin ediyorum. Burada başlıklardan bahsediyoruz, ancak kullanıcılar kaydırırken "yapışkan" olmasını istediğiniz herhangi bir UI öğesi için de yararlıdır. Öğe, görünümün kenarından belirli bir mesafeye geldiğinde "sıkıştığını" görürler.

Öğe, belirli bir noktaya gelene kadar göreceli olarak konumlandırılmış olarak ele alınır ve ardından "sabitlenir". Bu nokta CSS kullanılarak bildirilir. "Nokta", mutlak konumlandırmada olduğu gibi temel olarak üst, alt, sol veya sağı belirttiğiniz zamandır. Öğenin "yapışacak" bir şeyi olması için belirtmeniz gerekir.

Konumu Kullanma: Yapışkan

Kullanımı oldukça basit. Birkaç CSS bildirimi ve yapışkan bir başlığa sahip olabildim. İşte üç basit adım:

1. position:sticky; kullanarak öğeyi yapışkan olarak bildirebilmek için doğru stili bulun. ( position: -webkit-sticky; gibi tarayıcı öneklerini unutmayın).
2. Öğenin "yapışacağı" "yapışkan kenarı" (üst, sağ, alt veya sol) seçin.
3. Kaydırma alanından 10 piksel uzaktayken yapışkan hale gelen bir başlık için "yapışkan kenardan" mesafeyi, yani 10 piksel olarak bildirin.

 [css]

.navbar-sabit-üst {
  pozisyon: -webkit-yapışkan;
  konum: yapışkan;
  üst: 0;
}

[/css] 

Yapışkan başlık ile görüntü alanı arasında boşluk istemedim, bu yüzden üstten 0 piksel. Bu örneği Codepen'de görebilirsiniz.

Bu Yapışkan Taşma Durumlarının Farkında Olun

Taşma uyumluluğu

Harika, ama mükemmel değil. Bazı sınırlamalar vardır. Taşma bazen biraz tahmin edilemez olabilir. Bir üst öğede position: sticky gerektiren bir şeye sahip belirli taşma türlerinden uzak durmak en iyisidir. Otomatik taşma, kaydırma veya gizli sorunlar olabilir.

Sınırlı tarayıcı desteği

Tarayıcı desteği sınırlıdır, bu nedenle mevcut tarayıcının yapışkan konumlandırmayı destekleyip desteklemediğini tespit etmek için supports kuralını kullanmak bir seçenektir. Şuna benziyor:

 [css]

@destekler(konum:yapışkan){
  .başlık{
    pozisyon: -webkit-yapışkan;
    konum: yapışkan;
    üst: 0;
  }
}

[/css]

Yapışkan konumlandırmanın kesinlikle gerekli olup olmadığını düşünmek önemlidir. Eğer öyleyse, sabit konumlandırma yaklaşımı kullanılabilir. Kesinlikle gerekli değilse veya tarayıcı desteği önemli değilse, yapışkan yaklaşımın uygulanması daha kolaydır.

İlk başta karmaşık görünebilir, ancak bir navigasyon rutininde takılıp kalmanız için hiçbir neden yok; navigasyonunuzu yapışkan ve yumuşacık yapmak nispeten basittir. Bazı basit CSS sabit konumlandırmasıyla, kolayca yapışkan bir web sitesi başlığı oluşturabilirsiniz. Bazı basit JavaScript ile sabit gezinme, daha düşük bir yüksekliğe indirilerek geliştirilebilir ve kullanıcılara web sitesi içeriğini görüntülemeleri için daha fazla alan sağlanır.

Bunu canlı sitenizde denemeyin

Yerelde WP Engine tarafından barındırılan siteleriniz için yapışkan bir web sitesi başlığı oluşturun! Daha fazla bilgi edinin ve buradan ücretsiz indirin!