CSS ile Bir Div'i Sayfa Kaydıkça Sabitleme

CSS ile Bir Div'i Sayfa Kaydıkça Sabitleme

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/

 


Bu yazıyı 5 yıldız üzerinden kaçla değerlendirirsiniz?
Daha önce bu yazı 0 kez değerlendirilmiş ve ortalama 0 yıldız verilmiş.
Bu yazı daha önce 238 kez okundu.

Bu yazıyı beğendiniz mi? Haber bültenimize katılarak buna benzer yeni yazılardan haberdar olun!

Açılacak sayfada "Ben robot değilim" işaretleyip "Complete Subscription Request" yazan butona tıklayınız!

Yorum Yaz

    Yorumlar

    Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!
Bu alana reklam aylık 40 TL, 3 aylık 100 TL instagram takipçi satın al