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

Jak sprawdzić ScrollY danego ID

VPS Starter Arubacloud
+1 głos
238 wizyt
pytanie zadane 28 listopada 2021 w JavaScript przez Grzegorz Mikina Dyskutant (8,060 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 (123,060 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 Dyskutant (8,060 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 Dyskutant (8,060 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 312 wizyt
pytanie zadane 7 kwietnia 2016 w JavaScript przez rucin96 Użytkownik (500 p.)
0 głosów
0 odpowiedzi 134 wizyt
pytanie zadane 2 grudnia 2019 w C i C++ przez Char Mander Nowicjusz (180 p.)
0 głosów
1 odpowiedź 560 wizyt
pytanie zadane 29 sierpnia 2016 w JavaScript przez jaca121212 Nałogowiec (40,760 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...