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

Obsługa scrolla w JS

Aruba Cloud - Virtual Private Server VPS
0 głosów
764 wizyt
pytanie zadane 24 stycznia 2019 w JavaScript przez Helio Dor Nowicjusz (230 p.)

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

komentarz 24 stycznia 2019 przez Milesq Nałogowiec (32,020 p.)
A wiesz że JQuery to libka do js a nie inny język
komentarz 24 stycznia 2019 przez niezalogowany
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
komentarz 24 stycznia 2019 przez Helio Dor Nowicjusz (230 p.)
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.
komentarz 24 stycznia 2019 przez kenjiro244 Dyskutant (8,600 p.)

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.

komentarz 25 stycznia 2019 przez Helio Dor Nowicjusz (230 p.)
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..

1 odpowiedź

+1 głos
odpowiedź 24 stycznia 2019 przez Tomek Sochacki Ekspert (227,490 p.)
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.
komentarz 24 stycznia 2019 przez Helio Dor Nowicjusz (230 p.)
edycja 24 stycznia 2019 przez Helio Dor
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..

Podobne pytania

+1 głos
1 odpowiedź 437 wizyt
0 głosów
2 odpowiedzi 264 wizyt
pytanie zadane 13 czerwca 2021 w Inne języki przez Bakkit Dyskutant (7,600 p.)
0 głosów
0 odpowiedzi 249 wizyt
pytanie zadane 15 lutego 2020 w Offtop przez ReZerTer Początkujący (410 p.)

93,329 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,662 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...