Bu etkili ve güçlü tekniğe ulaşmak beklediğinizden çok daha kolaydır.

Web tasarımında yapışkan başlık, kullanıcı deneyimini ve gezinmeyi geliştiren güçlü bir araçtır. Kullanıcılar bir web sayfasını aşağı kaydırdıkça yapışkan bir başlık görünür kalır ve temel gezinme bağlantılarının her zaman erişilebilir olmasını sağlar. CSS kullanarak yapışkan başlık oluşturmanın inceliklerini inceleyelim.

Yapışkan Başlık Ne Kullanılır?

Yapışkan başlık, kullanıcı sayfayı kaydırdığında bile web sayfasında tek bir yerde kalır. Öncelikle belirli CSS özellikleri pozisyon: yapışkan, bu davranışı gerçekleştirmenize yardımcı olacaktır. Yapışkan başlığa sahip olmanın bazı avantajları arasında gelişmiş kullanıcı deneyimi ve web sitesinde kolay gezinme yer alır.

  • Kullanıcılar ana gezinme bağlantılarına yukarıya kaydırmadan kolayca erişebilirler.
  • Logo veya marka adı görünür kalarak marka kimliğini güçlendirir.
  • Yapışkan bir başlık, kenar çubuğu gezinmesini kaldırarak içerik için daha fazla alan bırakarak yerden tasarruf sağlayabilir.
instagram viewer

Başlığın Tasarlanması: HTML Yapısı

Herhangi bir yapışkan başlığın temeli HTML yapısıdır. Yapışkan başlığınız için gerekli HTML öğelerini nasıl oluşturacağınız aşağıda açıklanmıştır.

<body>
<header>
<spanclass="logo">Company Logo 🏠span>
<nav>
<ul>
<li><ahref="#home">Homea>li>
<li><ahref="#about">Abouta>li>
<li><ahref="#services">Servicesa>li>
<li><ahref="#contact">Contacta>li>
ul>
nav>
header>
<mainid="home"><h1>Home pageh1>main>
<sectionid="about"><h1>Abouth1>section>
<sectionid="services"><h1>Servicesh1>section>
<sectionid="contact"><h1>Contacth1>section>
body>

Bu yapı, logoyu içeren bir başlık ve sırasız gezinme bağlantıları listesine sahip bir gezinme öğesi kullanır. Daha sonra sayfadaki her bölümü temsil etmek için bir ana etiket ve birkaç bölüm etiketi kullanır. Şu anda sayfa şöyle görünüyor:

CSS ile Temel Atma

Aşağıdaki CSS kodu şunu kullanır: kutu modeli özellikleri Her yer tutucu bölüm için bir yüksekliğe sahip çekici bir tasarım oluşturmak için dolgu, kenar boşluğu ve esnek kutu gibi.

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


main,
section { height: 100vh; }


.logo { font-size: 3rem; }


main,
header,
section {
display: flex;
align-items: center;
}


main { justify-content: center; }


header {
justify-content: space-between;
padding: 1rem 2rem;
background: #b2babb; 
}


navul {
display: flex;
column-gap: 2rem;
list-style: none;
}


a {
text-decoration: none;
font-size: 2rem;
color: #333;
}


section { justify-content: center; }


#home { background: #2c3e50; }


#about { background: #ccccff; }


#services { background: #f5b7b1; }


#contact { background: #40e0d0; }


h1 {
 font-size: 4rem;
 color: #fff;
}

Sayfa artık şöyle görünmelidir:

Yapışkan Efektin Uygulanması: CSS

Şu anda sayfayı aşağı kaydırdığınızda başlığın ekranın dışına çıktığını fark edeceksiniz. Bunu düzeltmek için şunu kullanın: CSS konumu özelliği ve başlığı yapışkan olarak ayarlayın.

Bu özellik, kullanıcının kaydırma konumuna bağlı olarak göreceli ve sabit konumlandırmanın bir birleşimi gibi davranır.

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}

Başlığın yapışkan olarak ayarlanması, kaydırmadan bağımsız olarak sayfadaki bir konuma yapışmasını sağlar. Top özelliği, başlığın sayfada nereye yerleştirilmesi gerektiğini belirtir. Şimdi sayfayı aşağı kaydırmak şunları sağlar:

Potansiyel Yığınlama Sorunlarını Ele Alma

Bazen sayfadaki diğer öğeler yapışkan başlıkla çakışabilir. Başlığın üstte kalmasını sağlamak için z-index özelliğini ekleyebilirsiniz:

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}

Son olarak, daha iyi bir kullanıcı deneyimi için HTML öğesine düzgün kaydırma özelliğini ekleyin:

html {
font-size: 62.5%;
scroll-behavior: smooth;
}

Sayfa artık bölümler arasında sorunsuz bir şekilde kaydırılmalıdır:

CSS Yapışkan Başlıklarla Web Gezinmesini Yükseltme

Web sitenizin tasarımına yapışkan bir başlık eklemek, kullanıcı deneyimini büyük ölçüde geliştirebilir. Bu özellik, kullanıcıların ana menüye bağlı kalmasını sağlar, markanın tutarlı olmasını sağlar ve web sitenize modern bir görünüm kazandırır.

CSS'nin gücüyle bu etkiyi yaratmak basit ve etkilidir. Web tasarımı trendleri zamanla değişir, ancak yapışkan başlık farklı endüstriler için her zaman faydalıdır.