16 Temmuz 2018

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);
}

Bir Frontendci

Frontendci.com, sektörde çalışan ve gelecekte bu sektörde çalışmak isteyen tüm frontend geliştiriciler için türkçe html, css ve javascript eğitim, anlatım kaynaklarını derlemek amacıyla kurulmuştur. Türkçe eğitim videoları, anlatımlar, makaleler ve sunumların toplandığı bir mecradır.

Tüm içerikleri göster

Yorum yap

Bir Cevap Yazın