Tüm internet sitelerinde neredeyse olmazsa olmaz olan sticky header (menü) wordpress içerisinde veya front-end kodlamanızda kolaylıkla kullanabileceğiniz bir yapı olarak gözükmektedir. Sticky header (Yapışkan) nasıl yapılır? sorusuna birlikte cevap bulacağız. Bu kod blokları ile birçok şeyi sticky hale getirebilir ve scroll yakalayarak ilgili işlemi aktif edebiliriz.
Sticky Header Wordpress’de Nasıl Yapılır?
Kullanacağımız yapıyı sadece wordpress alt yapısına sahip sitelerinizde değil front-end kodlamalarınızda dahi rahatlıkla kullanabilirsiniz. Manuel yapacağınız tüm işlemlerde ilgili değişiklikleri yaparak sitenize eklemeyi gerçekleştirebilirsiniz. Buradaki önemli bir detay aşağıdaki paylaşılan kod bloklarını yapınıza göre hem değiştirmeli hem de uygun yerlere uygulamanız gerekmektedir.
Sticky Header önemi nedir?
Yapışkan menüler UI tasarımcıların da çok sevdiği ve birçok sitede aktif olarak kullanılan bir yapıdır. Bu yapı ile birlikte UX anlamında da kullanıcı rahatlığı sağlamış olursunuz. Birçok yerde header ve menü yapıları için kullanılıyor olsa da bazı alanlarda mobilde veya desktopda ilgili alanları sayfayla birlikte kaydırmak için de değerlendirebilirsiniz. Ben mobil kullanıcılar için daha kullanıcı dostu kolay bir yapı olduğunu düşünüyorum. Pricing / Fiyatlandırma sayfalarınızda fiyatları sayfada sabit tutarak diğer özellikleri kullanıcının rahatlıkla gezmesini sağlayabilirsiniz.
Eklentisiz sticky header yapımı
Sticky header yapımı için CSS ve JS kod bloklarını ilgili projemize dahil etmemiz gerekmektedir. Öncelikle aşağıdaki JS kod bloğumuzu wordpress kullanıcıları görünüm-> tema dosya düzenleyicisi içerisinde bulunan footer.php içerisinde en sona script taglarını açarak aralarına aşağıdaki ilgili kodu ekleyebilirler.
// Sayfanın kaydırılma scroll edilmesini yakalıyoruz.
window.onscroll = function() {myFunction()};
// Sayfamızda hangi alanı sabit tutacaksak o alanın idsini yakalamamız gerekmektedir.
var header = document.getElementById("myHeader");
// header değişkenimizin uzaklığını bir başka değişkene aktarıyoruz.
var sticky = header.offsetTop;
// Bu fonksiyon ile birlikte scroll aşağıya doğru gittiğinde header değişkenine aldığımız yere sticky classını ekletiyoruz. Tam tersi durumunda da bu classı siliyoruz.
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
} Bu yapıyı ilgili yere ekledikten sonra CSS kodlarımızı eklememiz gerekmektedir. Fakat adım adım işlemleri devam ettirmek isterseniz. Bu kod bloğundan sonra lütfen sayfanızda chrome tarayıcısı kullanıyorsanız konsolunuz üzerinden hangi idye class ekletmek istiyorsanız kaydırma olduktan sonra class ekleniyor mu kontrol ediniz. Class ekleme işlemi başarılı bir şekilde gerçekleşiyorsa artık sticky header wordpress nasıl yapılır ? yazımızda bir diğer adım olan aşağıdaki CSS kodlarımızı eklememiz gerekmektedir.
.sticky {
position: fixed;
top: 0;
width: 100%
}
JS kodumuzda sayfa aşağıya doğru kaydırıldığında .sticky classını ekletiyorduk. O yüzden bu classımın değerleri fixed olmasıyla birlikte en üste sabitlenerek gelecektir. Bazı durumlarda sticky classı aktif olarak kullanılacağı için benim önerim iki taraftada bu classın ismini başka bir şey yaparka sayfanıza eklemeniz olacaktır. Bu sayede web sitenizde bulunan başka bir class ile çakışmayacaktır.
İsteğinize sayfanızın durumuna göre sticky classınızı özelleştirmeyi unutmayınız. Genellikle karşılaşılan problem Z-index problemi olmakla birlikte tasarım yapınıza göre farklı problemler ile de karşılaşabilirsiniz. CSS kodunuzu görünüm-> özelleştir-> EK Css alanına ekleyebilir veya temanızın özelleştirilmiş CSS alanı varsa oraya ekleyebilirsiniz.
Web tasarım fiyatları ve hizmetleri için detaylı bilgiye link üzerinden ulaşabilirsiniz.
