Javascript 30 - Gün 24

20 Mayıs 2023

Projenin demosu : Demo

Başlangıç dosyalarını bulabileceğiniz repom: js-30 | github

Amaç

Javascript ve CSS kullanarak yapışkan bir menü oluşturmamız gerekiyor.

Çözüm

Öncelikle menünün sayfanın neresinden başladığını bulmamız gerekiyor. Bunun için menü elementini seçip offsetTop değerini kaydedelim. Ardından sayfada scroll olayını dinleyerek menünün bulunduğu yere kadar kaydırma işlemi yapıldığında menüye özel bir css classı ekleyelim.

const nav = document.querySelector('#main')
const topOfNav = nav.offsetTop;
 
function fixNav() {
  if (window.scrollY >= topOfNav) {
  nav.classList.add('fixed-nav');
  // fixed-nav classı eklenerek menünün sabit kalmasını sağlayalım
 
  // sonrasında body elementine menünün yüksekliği kadar paddingTop ekleyerek içeriğin menüye doğru çıkmasını engelleyelim
  document.body.style.paddingTop = nav.offsetHeight + 'px';
  } else {
  nav.classList.remove('fixed-nav');
  document.body.style.paddingTop = 0;
  }
}
 
window.addEventListener('scroll', fixNav);

Geriye yalnızca ilgili css classını eklemek kalıyor. style.css dosyasında:

.fixed-nav{
position:fixed;
box-shadow:0 5px rgba(0,0,0,0.1)
}

Son olarak css dosyasında menü içerisindeki logo elementiyle ilgili özelliklere ek bir özellik ekleyerek menü yapışkan hale geldiğinde logonun da görünür olmasını sağlayalım:

li.logo {
  max-width: 0;
  overflow: hidden;
  background: white;
  transition: all .5s;
  font-weight: 600;
  font-size: 30px;
}
/* Logo elementi .fixed-nav sınıfına sahip bir elementin içinde olduğunda genişlik değeri 0 yerine
* 500px olacak ve ekran gözükmeye başlayacaktır.
* */
.fixed-nav li.logo{
  max-width:500px;
}

Bu sayfayı düzenle