Jak sprawdzić ScrollY danego ID

Question

Szerokość strony się zmienia, ale wtedy scroll max Y tez się zmienia. Chciałbym najpierw sprawdzić na jakiej wysokości scroll top znajduje się dany element, ale nie mogę tego złapac w żaden sposób.

Sytuacja

<section id="1"></section>

<section id="2"></section>

<section id="3"></section>

 

Jak pobrać wysokość względem górnego 0 elementu o id="3";

Comments

może https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

Answer 1

Potrzebujesz getBoundingClientRect jeżeli zależy Ci tylko na zmianie względem viewport

window.addEventListener('resize', function(){
    el.getBoundingClientRect().top;
});

 

Comments

Viewport nie ma znaczenia, mam trzy kontenery, i viewport jest tu nie istotne.

Answer 2

var oft = window.pageYOffset;
let sdp1 = document.getElementById('sdOwn1');
let sdp2 = document.getElementById('sdOwn2');

let mdp1 = document.getElementById('mdOwn1');
let mdp2 = document.getElementById('mdOwn2');
let mdp3 = document.getElementById('mdOwn3');

let xlp1 = document.getElementById('xlOwn1');
let xlp2 = document.getElementById('xlOwn2');
let xlp3 = document.getElementById('xlOwn3');

window.addEventListener('scroll', function(e) {



    // small devices
      if(scrollY<650){
        // console.log('scroll jest mniejszy od 1000px;')
        this.document.getElementById('sdOwn1').classList.remove('animate__animated');
        this.document.getElementById('sdOwn1').classList.remove('animate__fadeInRight');
      }

      if(scrollY>650){
        // console.log('jest większy od 1000 px');
        this.document.getElementById('sdOwn1').classList.add('animate__animated');
        this.document.getElementById('sdOwn1').classList.add('animate__delay');
        this.document.getElementById('sdOwn1').classList.add('animate__fadeInRight');
      }

      if(scrollY>930){
        // console.log('jest większy od 1000 px');
        this.document.getElementById('sdOwn2').classList.add('animate__animated');
        this.document.getElementById('sdOwn2').classList.add('animate__delay-1s');
        this.document.getElementById('sdOwn2').classList.add('animate__fadeInLeft');
      }
      
      if(scrollY<930){
        // console.log('scroll jest mniejszy od 1000px;')
        this.document.getElementById('sdOwn2').classList.remove('animate__animated');
        this.document.getElementById('sdOwn2').classList.remove('animate__fadeInLeft');
      }
      // small devices

      // medium devices
      // product1
      if(scrollY<700){
        this.document.getElementById('mdOwn1').classList.remove('animate__animated');
        this.document.getElementById('mdOwn1').classList.remove('animate__fadeInRight');
      }

      if(scrollY>700){
        this.document.getElementById('mdOwn1').classList.add('animate__animated');
        this.document.getElementById('mdOwn1').classList.add('animate__delay-1s');
        this.document.getElementById('mdOwn1').classList.add('animate__fadeInRight');
      }
      // product1
      // product2
      if(scrollY<750){
        this.document.getElementById('mdOwn2').classList.remove('animate__animated');
        this.document.getElementById('mdOwn2').classList.remove('animate__fadeInLeft');
        }
      
      if(scrollY>750){
        this.document.getElementById('mdOwn2').classList.add('animate__animated');
        this.document.getElementById('mdOwn2').classList.add('animate__delay-2s');
        this.document.getElementById('mdOwn2').classList.add('animate__fadeInLeft');
      }
      // product2
      // product3
      if(scrollY<900){
        this.document.getElementById('mdOwn3').classList.remove('animate__animated');
        this.document.getElementById('mdOwn3').classList.remove('animate__fadeInRight');
        }
      
      if(scrollY>900){
        this.document.getElementById('mdOwn3').classList.add('animate__animated');
        this.document.getElementById('mdOwn3').classList.add('animate__delay-3s');
        this.document.getElementById('mdOwn3').classList.add('animate__fadeInRight');
      }
      // product3

      // medium devices

      
      
      // xl devices

      // product1
      if(scrollY<720){
        this.document.getElementById('xlOwn1').classList.remove('animate__animated');
        this.document.getElementById('xlOwn1').classList.remove('animate__fadeInRight');
      }

      if(scrollY>720){
        this.document.getElementById('xlOwn1').classList.add('animate__animated');
        this.document.getElementById('xlOwn1').classList.add('animate__delay-1s');
        this.document.getElementById('xlOwn1').classList.add('animate__fadeInRight');
      }
      // product1
      // product2
      if(scrollY<730){
        this.document.getElementById('xlOwn2').classList.remove('animate__animated');
        this.document.getElementById('xlOwn2').classList.remove('animate__fadeInLeft');
        }
      
      if(scrollY>730){
        this.document.getElementById('xlOwn2').classList.add('animate__animated');
        this.document.getElementById('xlOwn2').classList.add('animate__delay-2s');
        this.document.getElementById('xlOwn2').classList.add('animate__fadeInLeft');
      }
      // product2
      // product3
      if(scrollY<740){
        this.document.getElementById('xlOwn3').classList.remove('animate__animated');
        this.document.getElementById('xlOwn3').classList.remove('animate__fadeInRight');
        }
      
      if(scrollY>740){
        this.document.getElementById('xlOwn3').classList.add('animate__animated');
        this.document.getElementById('xlOwn3').classList.add('animate__delay-3s');
        this.document.getElementById('xlOwn3').classList.add('animate__fadeInRight');
      }
      // product3

      // xl devices

  });

      // // Drugi produkt mały ekran

Moje rozwiązanie