Javascript İle Sabit Header Yapımı (Fixed Header)  Javascript İle Sabit Header Yapımı (Fixed Header) | Googleda Görüntüle

Javascript İle Sabit Header Yapımı (Fixed Header)
 BEĞEN
  YORUM YAP

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.

Etiketler

Yorumlar

Bu Konuya Ait 2 Onaylı Yorum Bulunuyor.

Emre Erkan

Emre Erkan

  3 yıl önce

Aynı konuya benim çözümümde şu şekilde: http://jsfiddle.net/eabc8zew/

Emre Ceyhan

Emre Ceyhan | Admin

  2 yıl önce

İlginiz için teşekkür ederim.

özgür

özgür

  2 yıl önce

opacity ekleyip kaldıramadım yardımcı olursanız sevinirim

Emre Ceyhan

Emre Ceyhan | Admin

  2 yıl önce

Opacity ekleyip - kaldırma derken, tam olarak ne yapmak istiyorsunuz ?

Yorum Yap

CSS3 -webkit / -moz / -o Nedir ? CSS3 ve Tarayıcı İlişkisi

Belki daha önce karşılaşmız olabilirsiniz.Bazı CSS3 kodları birkaç defa aynı yazılıp baş...

  3532   1 yıl önce

CSS3 Geçiş Efektleri - Transition Nedir? Nasıl Kullanılır?

Merhaba arkadaşlar, çoğu sitelerde gördüğümüz daha yumuşak ve animasyonlu şekilde geçiş ...

  2307   1 yıl önce

3. İndir.com Mobil Uygulama Yarışması ABD'ye Götürüyor

İNDİR.COM MOBİL UYGULAMA YARIŞMASI ABD’ YE GÖTÜRÜYOR Geçtiğimiz ik...

  1687   2 yıl önce

CSS [ text-transform:uppercase ] Karakter Sorunu Çözümü

Css'de metin (text) biçimlendirme özelliklerinden biri olan text-transform:uppercase parametresini...

  5417   2 yıl önce

Olcay E. 3 ay önce demiş ki;


selamun aleyküm, yararlı bir css dersi
Yoruma Git

erhan tapan 9 ay önce demiş ki;


Siteyi coşturan kod erhan bunu beğendi
Yoruma Git

Nejdet Acar 1 yıl önce demiş ki;


Okumadan hemen cevaba sarılmayalım lütfen, okuyanlara ayıp oluyor...
Yoruma Git

Çılgın Koder 1 yıl önce demiş ki;


Bunu çoklu resimlerde nasıl yapacağız? Ve limit koymak istesek nasıl koyarız.
Yoruma Git