Bir web sayfasını aşağı kaydırırken ”takip eden” bir kenar çubuğu yapmak için bir çok yol var. CSS ve JavaScript (jQuery) ile bu işi kolayca yapabilirsiniz.
CSS
Bunu yapmanın en kolay yolu, sadece CSS sabit konumlandırma özelliğini kullanmaktır. Kenar çubuğumuz, göreli konumlandırmaya sahip bir #page-wrap id taglı div içerisindedir, böylece sayfa aşağı kaysada div yukarıda sabit kalacaktır.
#page-wrap { width: 600px; margin: 15px auto; position: relative;
}
#sidebar { width: 190px; position: fixed; margin-left: 410px;
}
Bu teknikle, sayfayı aşağı doğru kaydırırken kenar çubuğu sabit bir şekilde yerinde kalır.
jQuery
JavaScript'i kullanırsak, kullanıcının bir window.scroll olayından sonra ne kadar kaydığını ölçebiliriz. Bu mesafe, kenar çubuğunun başlangıçtaki üst konumundan daha fazla olursa, kenar çubuğunun üst kenar boşluğunu, aşağı doğru görünür aralık içine itmek için ayarlayabiliriz.
$(function() { var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } });
});
Burada dikkatimizi çekecek olan havalı animasyon efektinden başka özel bir avantaj yoktur.
Diğer "ortaya çıkar" tekniği
Sayfa aşağı kaydırıldığında eğlenceli "ortaya çıkacak" efekti olan özel bir kenar çubuğuna sahip olmak ister misiz?
İşin sırrı, alt kısmının üst kısmında yer alan ve arka kısmının altına yerleştirilmiş sabit bir arkaplana sahip başlık alanına sahip olmaktır.
Bunu yapmak için negatif üst kenar boşluğu kullanabilir veya üst konumlandırma değerini ayarlayabilirsiniz. Daha sonra, bir saydam beyaz soluk resim, kenar çubuğunun üst kısmına dikkatlice yerleştirilir ve ayrıca bunun üzerinde z-indekslenir. Böylece, üstbilgi tarafından gizlenen kenar çubuğunun üst kısmı, beyaz soluk görüntünün "ortaya çıkardığını" görmek için aşağı doğru kayar.
/* Negative top margin on sidebar pulls up header under title-area */
#sidebar { width: 190px; position: fixed; margin: -135px 0 0 410px;
}
/* Title area kept above all with z-index */
#title-area { background: white; position: relative; z-index: 3000;
}
/* white-fade image */
#reveal { position: absolute; right: 0; bottom: -20px;
}
Oluşabilecek Sıkıntılar
Sabit konumlandırdığımız içeriğin, çok küçük bir monitörün bile görüntülenebilir alanından daha uzun olmayacağından emin olmalıyız.
Yükseklik, görünen alanı aşacak olursa, tarayıcı penceresinin kenarının ötesinde, erişilemez bir şekilde tamamen gizlenmiş olacaktır. Sabit olmayan konumlandırılmış elemanlarla, bu çıkıntı bir kaydırma çubuğunu tetikler, sabit konum elemanları yoktur.
Demo Adresi: http://css-tricks.com/examples/ScrollingSidebar/
Yorumlar (0)