Webbilim.com'da çeşitli içerikler yer almaktadır. Nasıl yapılır, Nasıl içilir v.s. gibi tavsiyelere yer verilmektedir. Kendimiz için güzel gördüğümüz veya olsa iyi olurdu dediğimiz şeyleri sizler için derliyoruz..
antalya escort
Anasayfa / Webmaster / JQUERY / Yapışkan (Sabit) Sidebar Nasıl Yapılır?

Yapışkan (Sabit) Sidebar Nasıl Yapılır?

Web sitenizde bulunan sidebar (kenar çubuklarını) yapışkan yani sabit hale getirip projenize nasıl entegre edebileceğinizi anlatacağım. Gün geçtikçe kullanımı artan bu yapışkan (sabit) sidebar çeşidi bir web sitesinde kullanıcıların aşağı ve yukarı kaydırma işlemini yaparken kalıcı olarak durmasına yarayan oldukça kullanışlı bir sidebar çeşididir.

Ben javascript bilgimin üst seviyede olmaması kaynaklı olarak bu tür işler için jquery eklentisi kullanmayı tercih ediyorum. Bu örnekte yapışkan sidebar için Theia Sticky Sidebar’ını kullanacağız. Theia Sticky Sidebar github’da açık kaynak kodlu olarak paylaşılmış bir eklentidir. Lisans açıklamasına bu linkten ulaşabilirsiniz. MIT lisansına sahiptir. Ayrıca wordpress eklentisi de mevcuttur. Onada buradaki linkten ulaşabilirsiniz.

ÖRNEK:

JS Dosyalarını Web Sitenize Dahil Edin

<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="dist/ResizeSensor.min.js"></script> 
<script type="text/javascript" src="dist/theia-sticky-sidebar.min.js"></script>

Web sitenizin HTML Yapısını Gözden Geçirin

Web sitenizin HTML yapısını gözden geçirin ve aşağıdaki yapıya benzer veya aynı şekilde ayarlayın. İsteğe göre content ve sidebar alanının içerisine bir de .theiaStickySidebar classında bir “div” açabilirsiniz ama bu zorunlu değildir.

<div class="wrapper">   
  <div class="content">
   Content kısmı
  </div>
  <div class="sidebar"> 
   Sidebar kısmı
 </div>
</div>

HTML Yapımızı Javascript ile Belirtelim

Şimdi de hangi div’in yapışkan yani sabit hale gelmesini istediğimizi belirtmek.

Web sitemizin en alt kısmına aşağıdaki kodları ekleyelim.

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content, .sidebar').theiaStickySidebar({ // HTML yapımızı bu kısımda belirtiyoruz.
// Ayarlar
additionalMarginTop: 30 // 0 verirseniz ekranın en üst kısmında olur bu kod sayesinde yukardan 30 px boşluk bırakıyoruz.
});   
}); 
</script>

Ayarlar

Javascript kodlarında yapabileceğiniz ayar başlıkları şöyledir;

containerSelector

Sidebar’ın konteynır elemanı. Belirtilmezse, kenar çubuğunun üst öğesine varsayılan değerdir.

additionalMarginTop

Yapışkan alana margin top stili atamaya yarar. Varsayılan değer olarak 0 alınır .

additionalMarginBottom

Yapışkan alana margin bottom stili atamaya yarar. Varsayılan değer olarak 0’dır .

updateSidebarHeight

Kenar çubuğunun yüksekliğini günceller. Örneğin arka plan düzgün şekilde gösterilmiyorsa bunu kullanın. Varsayılan değer true’dur .

MinWidth

Genişliği bu değerin altındaysa kenar çubuğu normale döner. Duyarlı tasarımlar için kullanışlıdır.Varsayılan değer olarak 0’dır .

İlginizi Çekebilir

Instagram’da fotoğraflar yoruma nasıl kapatılır?

Sosyal medya platformları arasında giderek daha popüler bir hal alan Instagram, hesabı üstünde kontrol elde …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

− two = one

WeBBilim.Com