X
İzmir Web Tasarım
Anasayfa --- Genel --- Web tasarımında “Sticky Navigation” nedir ve nasıl uygulanır?

Yazar: 31 Aralık 2023

Web tasarımında “Sticky Navigation” nedir ve nasıl uygulanır?

Sticky Navigation, web tasarımında kullanılan bir tekniktir ve bir sayfanın belirli bir kısmını, genellikle menüyü, kullanıcı sayfayı kaydırdıkça ekranın üst kısmında sabit bir konumda tutar. Böylece kullanıcılar, sayfayı aşağı doğru kaydırdıklarında önemli navigasyon öğelerine kolayca erişebilirler. Sticky Navigation, kullanıcı deneyimini artırmak ve gezinmeyi kolaylaştırmak için kullanılır.

Sticky Navigation’ın temel özellikleri şunlardır:

  1. Sabit Konum: Belirli bir noktaya kadar sayfa kaydırıldığında, navigasyon öğeleri ekranın üst kısmında sabit bir konumda kalır.
  2. Kolay Erişim: Kullanıcılar, sayfayı aşağı doğru kaydırdıklarında menüye hızlıca erişebilirler. Bu özellik özellikle uzun sayfalarda ve içeriğin yoğun olduğu durumlarda faydalıdır.
  3. Responsive Tasarım Desteği: Sticky Navigation, responsive tasarım prensipleriyle birlikte kullanılabilir. Bu sayede farklı ekran boyutlarına uyum sağlanabilir.

Sticky Navigation nasıl uygulanır:

  1. CSS Position ve Top Özellikleri:
    • Bu yöntemde, CSS position: sticky özelliği kullanılır. top özelliği ile sabit konumlu öğenin ekranın üstünden ne kadar uzakta olacağı belirlenir.
    cssCopy code.sticky-navigation { position: -webkit-sticky; position: sticky; top: 0; background-color: #ffffff; /* Sabit konumlu öğenin arka plan rengi */ z-index: 100; /* Gerekirse, diğer öğelerin üzerine çıkacak bir z-index değeri belirlenebilir */ }
  2. JavaScript Kullanımı:
    • JavaScript ile de Sticky Navigation uygulanabilir. Sayfa kaydırıldıkça, belirli bir noktada position özelliği değiştirilir.
    htmlCopy code<script> window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } </script>
    • Yukarıdaki JavaScript kodunda, sticky sınıfı, sabit konumlu öğenin stilini belirtir. Sayfa kaydırıldıkça, sticky sınıfı eklenir veya kaldırılır.
  3. Framework veya Kütüphane Kullanımı:
    • Bazı CSS framework’leri (Bootstrap, Foundation vb.) veya JavaScript kütüphaneleri (jQuery, ScrollMagic vb.), Sticky Navigation gibi yaygın kullanılan özellikleri kolayca uygulamak için önceden hazırlanmış bileşenler veya fonksiyonlar içerebilir.
    htmlCopy code<!-- Bootstrap ile Sticky Navigation --> <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top"> <!-- Navbar içeriği --> </nav>

Sticky Navigation, kullanıcı deneyimini iyileştiren ve sayfa gezinmesini kolaylaştıran önemli bir web tasarım tekniğidir.