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

WallpaperPlay | Ücretsiz HD Masaüstü ve Mobil Wallpaper Duvar Kağıdı

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

  1 yıl önce

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

Emre Ceyhan

Emre Ceyhan | Admin

  1 yıl önce

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

özgür

özgür

  9 ay önce

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

Emre Ceyhan

Emre Ceyhan | Admin

  9 ay önce

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

Yorum Yap

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...

  791   10 ay önce

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

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

  2882   1 yıl önce

Input Değerlerini Ön Belleğe Alma [ localStorage ]

Bir form doldurma esnasında tarayıcının yanlışlıkla veya herhangi bir hata sonucu kapanması...

  1540   1 yıl önce

Javascript İle Upload Öncesi Görselleri Önizlemek

Bir çok yerde elbet karşınıza çıkmıştır, bir fotoğraf yüklüyorsunuz ve seçtiğiniz and...

  2270   1 yıl önce

Engin Pala 2 hafta önce demiş ki;


Teşekkür ederim ben işe koyuluyorum o zaman :D
Yoruma Git

Engin Pala 2 hafta önce demiş ki;


Merhaba Emre bey döviz kurlarının sürekli değişmesi mümkün mü yani anlık olarak nasıl çe...
Yoruma Git

Misafir 2 hafta önce demiş ki;


hocam bilgi için teşekkürler
Yoruma Git

sadık ikinci 1 ay önce demiş ki;


Emre bey, sizin kodlar ile merkez bankasından döviz değeri çekip, sitede para birimi dönüştü...
Yoruma Git