html de divi belli oranı geçtikten sonra aktif etme
merhabalar sabit bir iletişim butonum var ekranda sağda sabit ama onu slider dan yani aşağı dogru ınerken slideri geçtiktn sonra aktif olsun istiyorum bunu nasıl yapabiliriz. :)
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (1)
<div id="prototurk">sliderın altındaki gizemli div</div>
ID si prototurk olan bir div ekleyelim ( id si prototurk olması mecburi :) yoksa kod çalışmaz )
<script>
//Divimizi seçiyoruz
let prototurk = document.getElementById("prototurk");
//Fonksiyonumuzu yazıyoruz
function isVisible(el) {
const elr = el.getBoundingClientRect();
let clientHeight = document.documentElement.clientHeight,
clientWidth = document.documentElement.clientWidth;
return (
elr.top >= 0 &&
elr.left >= 0 &&
elr.bottom <= (window.innerHeight || clientHeight) &&
elr.right <= (window.innerWidth || clientWidth)
);
}
//Pencere Scroll edildiğinde , Sliderın altındaki div gözükürse kondisyonun ilk blokuna girecek
window.onscroll = function () {
if(isVisible(prototurk)){
console.log('şuan bu kısımda butonu aktif edebiliriz')
}else{
console.log('Eğer istersen şuan bu kısımda butonu geri defaktif edebiliriz.')
}
};
</script>
Söylediğini yapmanın birden fazla yolu var. Yukardaki çözüm de onlarda bir tanesi. Hayırlı protolar