• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak sprawdzić ScrollY danego ID

+1 głos
62 wizyt
pytanie zadane 28 listopada 2021 w JavaScript przez Grzegorz Mikina Mądrala (7,110 p.)
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";

2 odpowiedzi

+2 głosów
odpowiedź 28 listopada 2021 przez pablop76 VIP (119,080 p.)
edycja 28 listopada 2021 przez pablop76

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

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

 

komentarz 30 listopada 2021 przez Grzegorz Mikina Mądrala (7,110 p.)
Viewport nie ma znaczenia, mam trzy kontenery, i viewport jest tu nie istotne.
0 głosów
odpowiedź 4 grudnia 2021 przez Grzegorz Mikina Mądrala (7,110 p.)
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

Podobne pytania

0 głosów
3 odpowiedzi 182 wizyt
pytanie zadane 7 kwietnia 2016 w JavaScript przez rucin96 Użytkownik (500 p.)
0 głosów
0 odpowiedzi 63 wizyt
pytanie zadane 2 grudnia 2019 w C i C++ przez Char Mander Nowicjusz (180 p.)
0 głosów
1 odpowiedź 467 wizyt
pytanie zadane 29 sierpnia 2016 w JavaScript przez jaca121212 Nałogowiec (40,780 p.)

86,427 zapytań

135,188 odpowiedzi

300,309 komentarzy

57,184 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...