Compact Hero Bölümü

Menünün hero ile bütünleşik durduğu ve kaydırınca değiştiği modern yapı.

(Test için aşağı kaydırın →)

Mantık ve Tasarım

Bu yapıda üst menü (navbar), sayfa ilk açıldığında Hero bölümünün bir parçasıymış gibi görünür. Genellikle arka planı şeffaftır ve metinleri Hero üzerindeki kontrastı sağlayacak şekilde (örneğin beyaz) seçilir.

Sayfa aşağı kaydırıldığında ise, menü sabitleşmiş (sticky/fixed) olarak kalır ancak okunabilirliği artırmak için arka planı beyaz (veya koyu) bir renge dönüşür.

1. HTML Yapısı

Navbar'ın sayfa boyunca en üstte kalması için fixed-top (veya manuel olarak position: fixed) özelliğine sahip olması gerekir.

<nav class="navbar fixed-top transition-all" id="mainNavbar"> <div class="container"> <!-- Logo ve Linkler --> </div> </nav> <!-- Hero bölümü navbar'dan hemen sonra gelir --> <section class="hero-section"> ... </section>

2. CSS Stratejisi

Navbar için iki temel durum tanımlıyoruz: Başlangıç ve Kaydırılmış (Scrolled).

/* Başlangıç Durumu */ .navbar { background: transparent; color: white; transition: all 0.4s ease; /* Yumuşak geçiş için şart! */ } /* Kaydırıldığında Gelecek Sınıf */ .navbar.scrolled { background: white; color: #1a1a2e; box-shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 15px 0; /* Biraz daralarak şıklık katar */ }

3. JavaScript ile Tetikleme

Pencerenin scroll olayını dinleyerek belirli bir piksel (örneğin 50px) geçildiğinde scrolled sınıfını ekleyip çıkarıyoruz.

$(window).scroll(function () { if ($(this).scrollTop() > 50) { $('.navbar').addClass('scrolled'); } else { $('.navbar').removeClass('scrolled'); } });

İpucu: Logo Değişimi

Navbar rengi değiştiğinde, koyu zeminde beyaz logo, açık zeminde ise renkli/koyu bir logo kullanmanız gerekir. Bunu JavaScript içindeki sınıf değişim anında logoyu attr('src', '...') ile değiştirerek yapabilirsiniz.

Dokümantasyon Ana Sayfasına Dön

Detaylı Bilgi

Aşağı kaydırmaya devam edin... Bu alan sadece scroll etkisini test edebilmeniz içindir. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.

Modern web sitelerinde hero bölümleri genellikle viewport yüksekliğinin tamamını kaplar (100vh) ancak "Compact Hero" dediğimiz yapılar (60vh - 80vh) daha işlevsel olabilir, çünkü kullanıcıya hemen alttaki içeriği gösterir.

Kaydırma mesafesini (offset) hero yüksekliğine göre ayarlamak, geçişin hero bittiği anda tam olarak gerçekleşmesini sağlar.