Obsługa scrolla w JS

Question

Witam, próbowałem zrobić script, który będzie zmieniał klasę divowi po przeskrollowaniu danej wysokości, znalazłem parę skryptów ale w JQuery, a chcę pisać w JS.

Wklejam kod i scrypt który wyskrobałem :P

<div class="toTopButton">Do góry</div>

.toTopButton {
    display: none;
}

@media (min-width: 1024px) {
    .toTopButton {
        display: block;
        border-radius: 99px 99px;
        text-align: center;
        background-color: #1c74b2;
        font-size: 20px;
        line-height: 20px;
        width: 8vw;
        height: 4vh;
        padding: 10px;
        position: fixed;
        bottom: 15px;
        right: 15px;
        cursor: pointer;
    }
}

@media (min-width: 1400px) {
    .toTopButton {
        width: 7vw;
    }
}

if (toTopButton) {
    toTopButton.addEventListener("click", function () {
        window.scrollBy(0, -1 * window.pageYOffset);
    })
}
if ( pageYOffset > "40") {
    toTopButton.classList.toggle('active');
}

coś zrobiłem źle ? Proszę o pomoc :)

Comments

A wiesz że JQuery to libka do js a nie inny język

---

co chciałbyś zrobić? jeżeli chcesz dostać efekt pojawiających się elementów po scrollowaniu to nie ma sensu pisać tego od nowa samemu lepiej sprawdź sobie ScrollReveal

---

Chce tylko żeby wyskakiwał ten jeden div (przycisk, który przerzuca na samą górę strony). Pierwszy skrypt działa, a ten drugi nie wiem jak zrobić, by ten div miał pierw tylko tą jedną klasę, a gdy zjedzie się trochę w dół, żeby dodała się klasa active i wtedy w CSS ustawie, by się pojawiał na stronie :)

@Milesq

Wiem, że jQuery to ten sam język, ale chce się uczyć na JS by znać skrypty od podszewki, warto używać bibliotek, nie znając podstaw JS ? A wiem, że wszystko co da się zrobić w jQuery, może i dużo trudniej ale da się uzyskać ten sam efekt :)

Jakiś błąd popełniam w tym 2gim skrypcie, tylko nie wiem jaki.. if ( pageYOffset > "40") czy ten zapis jest dobrze napisany ? można od tak wejść do pageYOffset? A może mylę metody i inaczej powinienem to zapisać ? Uczę się dopiero JS, nie znam wszystkich metod.

---

No dobra.

 czy ten zapis jest dobrze napisany ? można od tak wejść do pageYOffset?

No ale wystarczy w if dodać console.log wyświetlić każdą zmienną dowiesz się wtedy co zawierają czy są poprawne.

---

const scrollingElement = document.scrollingElement || document.documentElement;
scrollingElement.scrollTop = 0;

if (scrollingElement.scrollTop > 500) {

    window.addEventListener(
        'scroll',
        () => {
            toTopButton.classList.add('active')
        }
    )
}

I nadal nie działa, gdy zjadę trochę w dół i  w console wpisuje 

scrollingElement.scrollTop > 500

to oddaje true.. a skrypt dalej nie działa, dlaczego? gdy wrzucę skrypt bez IFA to skrypt działa..

Answer 1

ale Ty się w tym kodzie nigdzie nie zapinasz na event scroll...

daj nasluchiwanie na scroll dla window i moze byc pomocne getBoundingCkientRect, opis znajdziesz w dokumentacji.

Ale tak w ogóle to ja raczej do takich rzeczy polecalbym IntersectionObserver z. ewentualnym pollyfilem jak wspierasz jakies starsze srodowiska. W docs MDN jest to ładnie opisane.

Comments

const scrollingElement = document.scrollingElement || document.documentElement;
scrollingElement.scrollTop = 0;

if (scrollingElement.scrollTop > 500) {

    window.addEventListener(
        'scroll',
        () => {
            toTopButton.classList.add('active')
        }
    )
}

I nadal nie działa, gdy zjadę trochę w dół i  w console wpisuje 

scrollingElement.scrollTop > 500

to oddaje true.. a skrypt dalej nie działa, dlaczego? gdy wrzucę skrypt bez IFA to skrypt działa..