Emre

Emre

WFN Üye
Konular
1,647
Mesajlar
1,743
Çözüm
0
Ticaret Puanı
0
Üyelik
9 Ay 3 Gün
Konum
Samsun
Web Sitesi
Var
Alanı
WordPress Uzm.
1/1
Konu sahibi
Sayfa kaydırıldığında üst menünün ekranda kalması için en pratik yöntem, menüye CSS’te position: sticky vermektir. Menü sayfanın üst kenarına ulaştığında sabitlenir; JavaScript ise menünün sabitlenmesi sırasında sınıf eklemek, gölge vermek veya farklı bir görünüm uygulamak gerektiğinde kullanılır. Aşağıdaki örnekte önce çalışan temel yapı kuruluyor, ardından kaydırma durumuna göre JavaScript ile görünüm değiştiriliyor.

CSS ile üst menüyü sabitleme​


Menünüz için bir HTML öğesi oluşturun ve bu öğeye bir sınıf verin. Örnekte menü header içinde yer alıyor:

HTML: 
<header class="ust-menu">
    <nav>
        <a href="#anasayfa">Ana sayfa</a>
        <a href="#hakkimizda">Hakkımızda</a>
        <a href="#hizmetler">Hizmetler</a>
        <a href="#iletisim">İletişim</a>
    </nav>
</header>

<main>
    <section id="anasayfa">Ana sayfa içeriği</section>
    <section id="hakkimizda">Hakkımızda</section>
    <section id="hizmetler">Hizmetler</section>
    <section id="iletisim">İletişim</section>
</main>

Ardından menüye position: sticky ve top: 0 değerlerini verin:

CSS: 
.ust-menu {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #ffffff;
    border-bottom: 1px solid #dddddd;
}

.ust-menu nav {
    display: flex;
    gap: 20px;
    padding: 16px 24px;
}

.ust-menu a {
    color: #222222;
    text-decoration: none;
}

main section {
    min-height: 700px;
    padding: 40px 24px;
}

Bu kodda top: 0, menünün tarayıcı penceresinin üstüne ulaştığında orada kalacağı anlamına gelir. z-index değeri ise menünün içerik bölümlerinin arkasında kalmasını önler. background-color verilmezse alttaki içerik menünün içinden görünebilir.

Önemli: position: sticky tek başına JavaScript gerektirmez. Menü yalnızca kaydırma sırasında sabit kalacaksa JavaScript eklemek gereksizdir.

Menü neden sabitlenmeyebilir?​


position: sticky kullanıldığı hâlde menü sabitlenmiyorsa önce menünün üst kapsayıcılarını kontrol edin. Üst kapsayıcılardan birinde overflow: hidden, overflow: auto veya overflow: scroll bulunması, yapışkan konumlandırmanın beklenenden farklı çalışmasına neden olabilir. Ayrıca menünün kapsayıcısı, menünün sabit kalacağı kadar yüksek bir alan içermelidir.

Menünün üstünde başka bir sabit çubuk varsa top değerini bu çubuğun yüksekliği kadar artırın. Örneğin üstte 48 piksel yüksekliğinde başka bir çubuk varsa top: 48px kullanılır. Menü içerik üzerinde kayboluyorsa z-index değerini artırın ve menüye arka plan rengi verin.

Kaydırılınca JavaScript ile menüye sınıf ekleme​


Menü sabit kaldığında rengini değiştirmek, gölge eklemek veya yüksekliğini azaltmak istiyorsanız JavaScript ile kaydırma konumunu izleyebilirsiniz. Bu yöntemde menüye başlangıçta ust-menu sınıfı verilir; sayfa belirli bir mesafeden fazla kaydırıldığında kaydirildi sınıfı eklenir.

Önce CSS’i hazırlayın:

CSS: 
.ust-menu {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #ffffff;
    border-bottom: 1px solid #dddddd;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.ust-menu nav {
    display: flex;
    gap: 20px;
    padding: 20px 24px;
    transition: padding 0.2s ease;
}

.ust-menu.kaydirildi {
    background-color: #f8f8f8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ust-menu.kaydirildi nav {
    padding-top: 12px;
    padding-bottom: 12px;
}

Daha sonra menüyü seçip kaydırma olayını dinleyin:

JavaScript: 
const ustMenu = document.querySelector('.ust-menu');
const sabitlemeMesafesi = 80;

function menuyuGuncelle() {
    if (window.scrollY > sabitlemeMesafesi) {
        ustMenu.classList.add('kaydirildi');
    } else {
        ustMenu.classList.remove('kaydirildi');
    }
}

window.addEventListener('scroll', menuyuGuncelle, { passive: true });

menuyuGuncelle();

Bu kodu HTML dosyanızda menüden sonra veya JavaScript dosyanızda DOM yüklendikten sonra çalıştırın. window.scrollY sayfanın dikey olarak kaç piksel kaydırıldığını verir. Değer 80’den büyük olduğunda kaydirildi sınıfı eklenir ve CSS’te tanımlanan gölge ile daha dar iç boşluk uygulanır. Sayfa tekrar en üste yaklaştığında sınıf kaldırılır.

menuyuGuncelle() çağrısının olay dinleyicisinden sonra ayrıca çalıştırılması, sayfa yüklenirken mevcut kaydırma konumunun da doğru görünümle başlatılmasını sağlar. Örneğin başka bir sayfadan bağlantıyla gelen veya tarayıcıda önceki konumu geri yüklenen kullanıcıda menü görünümü beklenen durumda kalır.

Hangi yöntemi kullanmalısınız?​


Sadece üst menünün kaydırma sırasında görünür kalmasını istiyorsanız CSS yöntemi yeterlidir. JavaScript eklemek, aynı davranışı daha karmaşık hâle getirir ve gereksiz bir kaydırma dinleyicisi oluşturur. Menü görünümünün kaydırma mesafesine göre değişmesi gerekiyorsa JavaScript ile sınıf eklemek uygundur.
İhtiyaçUygun yöntemNeden
Menü üstte sabit kalsınCSS position: stickyJavaScript gerekmeden çalışır
Kaydırılınca gölge veya renk değişsinCSS ve JavaScriptJavaScript sınıf ekler, görünümü CSS belirler
Menü her zaman pencereye bağlı olsunCSS position: fixedMenü normal belge akışından çıkar ve sürekli sabit kalır

Sticky ile fixed arasındaki fark​


position: sticky, menüyü normal belge akışında tutar ve yalnızca belirlenen sınıra ulaştığında sabitler. Bu nedenle çoğu üst menü için daha doğal bir davranış sağlar. position: fixed ise menüyü doğrudan tarayıcı penceresine bağlar; menü sayfanın başından itibaren sabit kalır ve belge akışından çıktığı için altındaki içeriğin üzerine gelebilir.

CSS: 
.ust-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #ffffff;
}

main {
    padding-top: 70px;
}

fixed kullanırsanız menünün yüksekliği kadar üst boşluk bırakmanız gerekir. Aksi hâlde sayfanın ilk içeriği menünün altında kalabilir. Menü yüksekliği değişebiliyorsa sabit bir padding-top değeri yetersiz kalabilir; bu durumda menü yüksekliğini JavaScript ile ölçüp ana içeriğe uygulamak gerekir. Basit ve yalnızca kaydırılınca sabitlenen bir üst menü için önce sticky yöntemini tercih edin.

Çalışıp çalışmadığını kontrol etme​


Örneği kaydettikten sonra sayfayı açın ve menünün altında yeterli miktarda içerik bulunduğundan emin olun. Sayfayı aşağı kaydırdığınızda menü üst kenarda kalmalı, içerik menünün arkasında görünmemeli ve JavaScript kullanılan örnekte kaydırma mesafesi 80 pikseli geçtiğinde gölge oluşmalıdır.

Menü hiç sabitlenmiyorsa şu sırayla kontrol edin:
  1. Menü sınıfının HTML’de gerçekten ust-menu olduğundan emin olun.
  2. CSS dosyasının sayfaya yüklendiğini ve position: sticky kuralının başka bir CSS kuralıyla ezilmediğini kontrol edin.
  3. Menünün üst kapsayıcılarında kaydırmayı sınırlayan overflow değerlerini inceleyin.
  4. Menünün sabitleneceği kadar uzun içerik bulunduğunu doğrulayın.
  5. JavaScript kullanıyorsanız tarayıcının geliştirici araçlarındaki Console bölümünde null veya sözdizimi hatası bulunmadığını kontrol edin.
JavaScript tarafında document.querySelector('.ust-menu') sonucu null ise kod çalıştığı anda bu sınıfa sahip HTML öğesi henüz oluşturulmamış olabilir. Script’i HTML’nin kapanış body etiketinden hemen önce yükleyin veya kodu DOMContentLoaded olayı içinde çalıştırın. Sınıf ekleniyor ancak görünüm değişmiyorsa bu kez CSS’te .ust-menu.kaydirildi seçicisinin doğru yazıldığını ve başka kurallar tarafından geçersiz kılınmadığını kontrol edin.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)