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.
Emre Erkan
5 yıl önceAynı konuya benim çözümümde şu şekilde: http://jsfiddle.net/eabc8zew/
Emre Ceyhan | Admin
5 yıl önceİlginiz için teşekkür ederim.
özgür
4 yıl önceopacity ekleyip kaldıramadım yardımcı olursanız sevinirim
Emre Ceyhan | Admin
4 yıl önceOpacity ekleyip - kaldırma derken, tam olarak ne yapmak istiyorsunuz ?