CSS Kullanmadan Fixed Div Oluşturmak

CSS Kullanmadan Fixed Div Oluşturmak

Yüzen elemanlar (Fixed, Relative, Absolute) üzerinde çalışırken yani Body üzerinde değil de bir Overlay sayfa üzerinde çalışıyorsanız ve scroll olduğunda sabit kalmasını istediğiniz bir diviniz varsa aşağıdaki kod tam size göre. Aynı zamanda React alt yapısını kullanıyorsanız sonradan DOM’a eklenen elemanlarda fixed position her zaman sıkıntı yaratacaktır. Bu sorunu aşağıdaki kod bloğuyla çözebilirsiniz. CLASS_EKLE yazan yere kapsayıcı divinizin (yani içerisinde scroll yaptıracağınız divin) classını yazın ve ID_EKLE yazan yere de sabit (fixed) kalmasını istediğiniz divin idsini yazın. Konu tek sefer çalıştırmanız yeterlidir gerisini javascriptin güzellikleri halledecektir:)

function relative_sticky(id, topSpacing){

    if(!topSpacing){ var topSpacing = 0; }

    var el_top = parseFloat(document.getElementById(id).getBoundingClientRect().top);
    el_top = el_top - parseFloat(document.getElementById(id).style.top);
    el_top = el_top * (-1);
    el_top = el_top + topSpacing;

    if(el_top > 0){
        document.getElementById(id).style.top = el_top + "px";
    } else{
        document.getElementById(id).style.top = "0px";
    }
}

document.querySelector('CLASS_EKLE').onscroll = function(){
    relative_sticky("ID_EKLE", 10);
}