v2.5.2
Giriş yap

html de divi belli oranı geçtikten sonra aktif etme

Anonim
304 defa görüntülendi

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. :)

scotterinyes
877 gün önce
<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