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

  11 ay önce

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

Emre Ceyhan

Emre Ceyhan | Admin

  11 ay ö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ş...

  782   1 ay ö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ş ...

  477   1 ay ö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...

  917   1 yıl önce

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

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

  3272   1 yıl önce

ömer güzelyurt 2 hafta önce demiş ki;


çok teşekkür ederim işime yaradı sağolsan :)
Yoruma Git

Mesut Hocaoglu 1 ay önce demiş ki;


İnternet ortamında " bu işin piriyim " diye geçinenlere nazaran kısa ve açıklayıcı anlatım...
Yoruma Git

Kutay Erten 1 ay önce demiş ki;


Kardeşim seni tebrik ediyorum bu kadar kısa bir kodu uzun uzun anlatmışşın , renk geçişleri...
Yoruma Git

Abdullah 1 ay önce demiş ki;


Teşekkürler:)
Yoruma Git