Javascript İle Sabit Header Yapımı (Fixed Header)  

Merhaba arkadaşlar, kendi bloğumun yapımında da kullandığım sabit header uygulamasının yapımını sizlerle paylaşacağım.

İşleyiş şöyle: Aşağıda ki jquery kodlarımız scroll tepkimesine girdiğinde class verip belirlediğimiz header'a bir class daha atıyor.Bu class'da üst kısımda sabit kalma durumu ve türlü değişiklikleri barındırıyor.

Benim bloğumda kullandığım kodlar şu şekilde;
(Siz kendinize göre biçimlendirebilirsiniz.)

JS KODU

    $(document).ready(function() {
         $(window).scroll(function () {
          if ($(document).scrollTop() == 0) {
              $('.header-top-main').removeClass('heading');
          } else {
              $('.header-top-main').addClass('heading');
          }
      });
    });

CSS KODU

 .heading {
   position: fixed;
   z-index: 9999;
   width: 100%;
   background: #2E3944;
   padding-top: 12px;
 }

Benim belirttiğim .header-top-main class'ının yerine headerınız class'ını yazabilirsiniz.
Belirttiğim .heading class'ı scroll tepkimesine girdiğinde atanacak class'dır.

Buradaki tek amaç header'ı sabitlemek değil, bir class atayarak türlü efektler ve özellikler verebilmemizede yaramaktadır.

Eğer scroll durumunda header'da zıplama yani küçük bi sarsılma durumunu yaşamak istemiyorsanız, header'a da position:fixed ve width:100% vermeniz gerekmekte'dir.