Compact Hero

Kaydırınca değişen navbar etkisini üstte görebilirsiniz.

Mantık ve Tasarım

Navbar, sayfa ilk açıldığında şeffaftır. Kaydırıldığında `scrolled` sınıfı eklenerek arka planı opak hale getirilir.

.navbar { background: transparent; transition: 0.4s; }
.navbar.scrolled { background: white; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

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