Bir web sayfasını aşağı kaydırırken ”takip eden” bir kenar çubuğu. Bununla ilgili bir çok yol var. CSS ve JavaScript (jQuery) ile bu işi kolayca yapabilirsiniz. CSS Bunu işlemenin en kolay yolu sadece CSS sabit konumlandırmayı 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 sağlam ş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. Bonus "ortaya çıkar" tekniği Tim Van Damme'nin Maxvoltar.com sitesindeki tek tek blog gönderileri, sayfa aşağı kaydırıldığında eğlenceli "ortaya çıkacak" efekti olan özel bir kenar çubuğuna sahip. İşin sırrı, alt kısmının üst kısmında yer alan ve arka kısmının altına yerleştirilmiş katı bir arkaplana sahip bir 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 alfa 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 solgun 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 Bu tekniklerin herhangi birinde, sabit konumlandırma ile uğraşıyoruz. Sabit konumlandırma "gerçek" içerik (örneğin, bir arka plan görüntüsünün aksine) biraz tehlikeli bölgedir. 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/
