- Konu sahibi
- #1
CSS ile sabit başlık nasıl çalışır?
Bir başlığın sayfa kaydırılırken görünür kalmasını istiyorsanız çoğu durumda
position: sticky kullanmanız yeterlidir. Başlığa top: 0 değeri verin, arka plan ve z-index tanımlayın; ardından başlığın içinde bulunduğu alanın yüksekliğinin kaydırma sırasında yeterli olduğundan emin olun. Aşağıdaki örnek, başlığı sayfanın üst kenarına yapıştırırken içeriğin normal akışını korur.
HTML:
<header class="site-header">
<nav class="site-nav">
<a href="#">Site adı</a>
<a href="#icerik">İçerik</a>
<a href="#iletisim">İletişim</a>
</nav>
</header>
<main id="icerik">
<h1>Sayfa başlığı</h1>
<p>Sayfayı kaydırdığınızda başlık üst kenarda görünür kalır.</p>
<!-- Uzun içerik -->
</main>
CSS:
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background-color: #ffffff;
border-bottom: 1px solid #dddddd;
}
.site-nav {
display: flex;
gap: 1rem;
align-items: center;
min-height: 60px;
padding: 0 1rem;
}
.site-nav a {
color: #222222;
text-decoration: none;
}Bu kodu HTML dosyanızdaki başlık bölümüne, CSS kodunu da bağlı stil dosyanıza veya
<style> bloğuna ekleyin. Sayfa içeriği başlığın altına yerleştiği için position: fixed kullanımında sık görülen içerik örtüşmesi burada oluşmaz. Sayfayı başlık tamamen görünür durumdayken aşağı doğru kaydırdığınızda başlık üst kenara ulaşır ve orada kalır; ilgili kapsayıcı alan sona erdiğinde ise normal akışına döner.Sticky başlığın çalışması için gereken koşullar
position: sticky, başlığı tarayıcı penceresine her durumda sabitlemez. Başlık, bulunduğu kaydırılabilir kapsayıcının sınırları içinde hareket eder. Bu nedenle başlığın üst öğelerinde aşağıdaki özellikleri kontrol edin:- Başlığın üzerinde
top: 0,bottom: 0veya kullanılacak başka bir eşik değeri bulunmalıdır. Bu değer yoksa yapışma noktası belirlenmez. - Üst kapsayıcılarda gereksiz
overflow: hidden,overflow: autoveyaoverflow: scrollkullanımı başlığın beklenmeyen bir alana göre sabitlenmesine yol açabilir. - Başlığın arka planı olmalıdır. Arka plan tanımlanmazsa alttaki metin başlığın içinden geçiyormuş gibi görünebilir.
- Başlık başka bileşenlerin altında kalıyorsa
z-indexdeğerini artırın. Bunun etkili olması için başlıktaposition: stickybulunmalıdır. - Başlık kendi kapsayıcısının tamamını kaplayan veya içerikten daha uzun bir alanda kullanılıyorsa yapışacağı mesafe kalmayabilir.
position: sticky kuralının gerçekten uygulandığını kontrol edin. Daha sonra başlığın üst öğelerinde kaydırma davranışını değiştiren overflow kurallarını inceleyin. Başlığın yapıştığı yer yanlışsa, başlık yüksekliğini ve top değerini kontrol edin.Başlık üstte başka bir alan bırakıyorsa
Sayfanızda sabit bir duyuru çubuğu veya başka bir üst menü varsa
top: 0 başlığı onun üzerine bindirebilir. Üst alanın yüksekliği 40 piksel ise sticky başlığı 40 piksel aşağıdan başlatın:
CSS:
.site-header {
position: sticky;
top: 40px;
z-index: 1000;
background-color: #ffffff;
}Daha esnek bir çözüm için yüksekliği CSS değişkeniyle tanımlayabilirsiniz:
CSS:
:root {
--announcement-height: 40px;
}
.site-header {
position: sticky;
top: var(--announcement-height);
}Buradaki
top değeri, başlığın görünüm alanının üstünden ne kadar uzaklıkta yapışacağını belirler. Üst çubuğun yüksekliği değişiyorsa sabit piksel değeri yerine gerçekten kullanılan yüksekliği temsil eden bir değişken veya uygun bir düzen kuralı kullanın.Sticky ve fixed arasındaki fark
Hangi yöntemin doğru olduğu, başlığın yalnızca kendi bölümünde mi yoksa sayfa boyunca mı görünür kalması gerektiğine bağlıdır.
| Yöntem | Davranış | Dikkat edilmesi gereken |
|---|---|---|
position: sticky | Başlık normal akışta başlar, belirlenen noktaya gelince yapışır. | Kapsayıcı, overflow ve kapsayıcı yüksekliği davranışı etkiler. |
position: fixed | Başlık doğrudan görünüm alanına sabitlenir. | Normal akıştan çıktığı için içerik başlığın altında kalabilir. |
sticky tercih edin. Başlığın belge yapısından bağımsız olarak her zaman tarayıcı penceresinde görünmesi gerekiyorsa fixed kullanılabilir; ancak bu durumda içerik için başlık yüksekliği kadar üst boşluk ayırmanız gerekir.
CSS:
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
z-index: 1000;
background-color: #ffffff;
}
main {
padding-top: 60px;
}Bu
fixed örneğinde main için verilen üst boşluk, içeriğin başlığın arkasında başlamasını önler. Başlığın gerçek yüksekliği 60 pikselden farklıysa padding-top değerini de aynı ölçüde güncelleyin. Mobil görünümde başlık satır atlayarak büyüyorsa sabit yükseklik kullanmak yerine düzeni yeniden kontrol edin.Son kontrol
Uygulamadan sonra sayfayı geniş ve dar ekranlarda kaydırın. Başlık üst kenara geldiğinde görünür kalıyor, bağlantılar başlığın arka planı üzerinde okunuyor ve içerik başlığın altında gizlenmiyorsa temel kurulum tamamlanmıştır. Yapışma yalnızca belirli bir kapsayıcı içinde oluyorsa bu genellikle hatalı değildir;
sticky davranışının doğal sınırıdır. Başlığın tüm sayfa boyunca kalması gerekiyorsa kapsayıcı yapısını değiştirin veya içerik yüksekliği için gereken boşluğu hesaplayarak fixed yaklaşımına geçin.