Yapışkan bir 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 istediklerinde yukarı kaydırmaya gerek kalmadan navigasyona kolayca erişmesini sağlar.

Bu işlevselliğe sahip öğelere genellikle "yapışkan" denir, çünkü bunlar kullanıcı web sitesinde hareket ettikçe yapışır ve görünür kalır. 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.

Gezinme, bir web sitesinin en önemli unsurlarından biri olduğundan, bu yaklaşımı benimsemek, gezinmeyi daha erişilebilir hale getirmeye yardımcı olur. Yerinde duran bir navigasyona sahip olmak, kullanıcı için son derece önemli olan web sitesi içeriğinde hareket ederken kolay bir akış sağlar.

"Yapışkan gezinme öğeleri, insanlar web sitenizde dolaşırken kolay bir kullanıcı akışı oluşturmaya 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ünüm alanına veya tarayıcı penceresinin kendisine göre konumlandırılır. Site kaydırıldığında görüntü alanı değişmediğinden, bu sabit konumlu öğe sayfa kaydırıldığında aynı yerde kalacaktır.

Not: Bunu canlı sitenizde denemeyin

Unutmayın: Hiçbir şeyin bozulmadığından emin olmak için kodu asla doğrudan sitenizde 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?

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

.navbar-fixed-top {

position: fixed;

right: 0;

left: 0;

z-index: 999;

}

Sayfanız ne kadar uzun olursa olsun veya ne kadar yukarı ve aşağı kaydırırsanız gezin, gezinme, sayfanın en üstüne "takılıp kalır". Navigasyon için yerleşimi oluşturan navigasyona .navbar-fixed-top adlı bir sınıf eklendi. Bu sınıfı nav etiketine ekledim. Konum sabit olarak ayarlanı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 her uygulandığında, elemanın sabit konumunu yaratacaktı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 çok sayfa öğesi olacaktır.

Bir diğer önemli husus da z-endeksidir. Navigasyonun her zaman görünür olmasını istediğimiz için, diğer öğelerle örtüşmediğinden emin olmamız gerekir. z-index başvurduğumuzda, belirli öğelerin yığın sırasını belirleyen 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, bu da onu navigasyon için güvenli bir bahis haline getirir.

Sayfa gövdesini ayarla

Navigasyon artık sabit bir konumda olduğundan, içeriğin bir kısmını üstte kapsayacaktır. Bunun için basit bir düzeltme var. Gövdenin üst kısmına dolgu eklemek, sayfayı aşağı doğru 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:

body {

padding-top: 75px;

}

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ığı yumuşacık yapma

Bir kullanıcı belirli bir noktayı geçtiğinde daha ince hale gelen ve yumuşacık görünmesine neden olan bir başlık bulmak yaygındır. Navigasyonun boyutu küçüldüğünde, kullanıcının ana web sitesi içeriğini görmesi için daha fazla alan sağlamasına yardımcı olur. Bu özellikle daha küçük cihazlarda yararlıdır. Bunu gerçekleştirmek için CSS ve JavaScript'in bir kombinasyonunu kullanacağız.

AnimatedHeader komut dosyasıyla yumuşak gezinme

Kaydırma sırasında boyutunu değiştirecek animasyonlu bir başlık eklemek için, gezinmeyi yumuşacık yapmak için harika, hafif bir çözüm var. AnimatedHeader olarak adlandırılır. 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.

Gezinme için temel CSS

Şimdi iki önemli CSS stiline bir göz atalım. İlki muhtemelen size tanıdık geliyor, sabit gezinme için yükseklik, genişlik ve sabit konumumuzu belirten .navbar-fixed-top . Aşağıda, 75 piksellik bir yükseklik belirten başka bir sınıfın eklendiğini görebilirsiniz. Bu "ezilmiş" boyuttur.

.navbar-fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f6f6f6;
z-index: 999;
height: 90px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}

.navbar-fixed-top.cbp-af-header-shrink {
height: 75px;
}

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

function scrollPage() {
var sy = scrollY();
if ( sy >= changeHeaderOn ) {
classie.add( header, 'cbp-af-header-shrink' );
}
else {
classie.remove( header, 'cbp-af-header-shrink' );
}
didScroll = false;
}

Sadece 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, bir kullanıcı belirli bir noktayı geçtikten sonra, .cpb-af-header-shrink sınıfı eklenir. 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 kolaylaştırır. Tarayıcı desteği korkunç değil, ancak tam olarak küresel de değil. Yapışkan beyanınız olduğunda, ö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. Sanırım biraz yapışkan konumlandırma ile karşılaşıyorsunuz. 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 ulaştığında "sıkıştığını" görüyorlar.

Öğe, belirli bir noktaya gelene kadar göreli konumlanmış olarak kabul edilir ve ardından "sabitlenir". Bu nokta CSS kullanılarak bildirilir. "Nokta", temel olarak, mutlak konumlandırmada yaptığınız gibi, üst, alt, sol veya sağı belirttiğiniz zamandır. Öğenin "yapışması" gereken bir şey olması için belirtmeniz gerekir.

Konum kullanma: yapışkan

Kullanımı oldukça basittir. 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ışması" için "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" olan mesafeyi belirtin, yani 10 piksel.

.navbar-fixed-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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

Dikkat edilmesi gereken yapışkan taşma durumları

Taşma uyumluluğu

Bu harika, ama mükemmel değil. Bazı sınırlamalar var. Taşma bazen biraz tahmin edilemez olabilir. Bir üst öğede, position: sticky gerektiren bir şeyle belirli taşma türlerinden uzak durmak en iyisidir. Otomatik taşma, kaydırma veya gizli ile ilgili 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 sabit konumlandırmayı destekleyip desteklemediğini tespit etmek için supports kuralının kullanılması bir seçenektir. Şuna benziyor:

@supports(position:sticky){
  .header{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

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 rutinine takılmak için hiçbir neden yoktur; navigasyonunuzu yapışkan ve yumuşacık yapmak nispeten basittir. Bazı basit CSS sabit konumlandırma ile kolayca yapışkan bir web sitesi başlığı oluşturabilirsiniz. Bazı basit JavaScript'lerle sabit gezinme, azaltılmış bir yüksekliğe indirilerek geliştirilebilir ve kullanıcılara web sitesi içeriğini görüntülemek için daha fazla alan sağlar.

Bunu canlı sitenizde denemeyin

Siteniz Yerel'deyken yapışkan bir web sitesi başlığı oluşturun! Daha fazla bilgi edinin ve buradan ücretsiz indirin!

Bu makale ilk olarak 2 Şubat 2016'da yayınlandı. En son 14 Ekim 2018'de güncellendi.