Bir çok web sitede kaydırma çubuğunu aşağı çektikçe bazı nesnelerin üste sabit durduğunu görürsünüz. Bu işlemin mantığı kaydırma çubuğunu belirli bir seviyeye geldiğinde nesne pozisyonu sabit kalır. Bunu javascript ile yapabilirsiniz. Bu işlemi iki türlü yapabilirsiniz. Birincisi, objeye style değeri vermek. İkincisi, class atamak.
Birinci yöntem;
[code]<div id=”sticky”></div>
<script>
window.onscroll = function() {
var nesne = document.getElementById(“sticky”);
var sticky = nesne.offsetTop;
if (window.pageYOffset > sticky) {
nesne.style.position = “fixed”;
} else {
nesne.style.position = “”;
}
}
</script>[/code]
İkinci yöntem;
[code]<style>
.sticky {
position: fixed;
top: 0px
}
</style>
<script>
window.onscroll = function() {
var nesne = document.getElementById(“myHeader”);
var sticky = nesne.offsetTop;
if (window.pageYOffset > sticky) {
nesne.classList.add(“sticky”);
} else {
nesne.classList.remove(“sticky”);
}
}
</script>[/code]
Her iki yöntemde de dikkat edilmesi gereken bir husus var. “sticky” nesnesi sabitlendiği zaman; “sticky” nesnenin sonrasındaki nesne, “sticky” nesnenin yüksekliği kadar altında kalır. Bu yüzden, “sticky” nesnesi sabitlendiğinde, “sticky” nesnenin sonrasındaki nesnenin padding veya margin değeri (“sticky” nesnenin yüksekliğinden biraz fazla) vermek gerekiyor.
