4programmers.net 4p Forum JavaScript SetTimeout + zmiana styli przy zdarzeniu onscroll - Jak uzyskać płynność ?

SetTimeout + zmiana styli przy zdarzeniu onscroll - Jak uzyskać płynność ?

SetTimeout + zmiana styli przy zdarzeniu onscroll - Jak uzyskać płynność ?
Greedri
GR
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 44
0

Witam, mam następujący problem.
Uzyskałem efekt przy skrollowaniu żeby od pewnego miejsca wysuwał mi się z prawej strony przycisk. Wszystko działa jednakże kod JS jest na tyle słaby że funkcjonalność jest mało zadawalająca ...
Link do strony - > http://wojcik.technikuminformatyczne.eu/30/

Chciałbym żeby ten kawałek JS był bardziej inteligentny, a w JS nie czuje się jak ryba w wodzie więc ciężko mi coś osiągnąć idealnego :/

JS

Kopiuj
function ejectScrollUP(){
    var scrollableElement = document.getElementById('scrollableElement');
    scrollableElement.addEventListener('wheel', findScrollDirectionOtherBrowsers);

    function findScrollDirectionOtherBrowsers(event){
        var delta;
        if(window.scrollY > 600){
            if (event.wheelDelta){
                delta = event.wheelDelta;
            }else{
                delta = -1 *event.deltaY;
            }
            if (delta < 0){
                setTimeout(removeStyleScrollUP, 1000); 
            }else if (delta > 0 ){
                setTimeout(addStyleScrollUP, 1000);
            }
        }else{
            setTimeout(removeStyleScrollUP, 0); 
        }
    }


    function addStyleScrollUP(scrollUP = document.getElementById("scrollUP")){
        scrollUP.style.visibility="visible";
        scrollUP.classList.add("scrollUP2"); 
    }

    function removeStyleScrollUP(scrollUP = document.getElementById("scrollUP")){
        scrollUP.style.visibility="hidden";
        scrollUP.classList.remove("scrollUP2");
    }
}

HTML

Kopiuj
<body onload="showDate()" onscroll="ejectScrollUP()" >
<div id="scrollableElement">    

    <div class="start-background">

        <header id="navigation">
            
        </header>

    </div>

    <main>
        
    <div id="margin"></div>

    <footer>

    </footer>

    <div class="scrollUP" id="scrollUP">
        <a onclick="scrollUP()"><i class="demo-icon icon-up-circled"></i></a>
    </div>


</div>

<script src="js/jquery-3.2.1.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
Udostępnij
Komentuj
Haskell
Haskell
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 4700
0

Nie określiłeś co chcesz osiągnąć. Ja sprawdzałbym tylko scrollY i pokazywał lub chował button. Po co liczysz deltę, to nie wiem...

Udostępnij
Komentuj
Freja Draco
Freja Draco
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 3394
1

Wyprute na szybko z czegoś większego i nietestowane:

Kopiuj
zg_pokaz_strzalke_przy   = 600;
zg_przewiniete_okno_stan = 0;


window.onscroll=window_onscroll;
function window_onscroll() {
  zg_okno_skroll_od_gory=window.pageYOffset;
  var czy_przeskok_przewinieca=0;
  if (zg_przewiniete_okno_stan==0) {
    if (zg_okno_skroll_od_gory>=zg_pokaz_strzalke_przy) {
      czy_przeskok_przewinieca=1;
      zg_przewiniete_okno_stan=1; 
    }
  } else {
    if (zg_okno_skroll_od_gory<zg_pokaz_strzalke_przy) {
     czy_przeskok_przewinieca=1;
     zg_przewiniete_okno_stan=0; 
    }
  }
  if (czy_przeskok_przewinieca==1) na_gore_pokaz_ukryj();
}


function na_gore_pokaz_ukryj() {
  if (zg_okno_skroll_od_gory<zg_pokaz_strzalke_przy) {
    document.getElementById("przycisk_na_gore").style.display="none";
  } else {
    document.getElementById("przycisk_na_gore").style.display="block";
  }
}
Udostępnij
Komentuj
Greedri
GR
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 44
0

@Haskell: Bo pokazywanie przycisku ma następować przy warunkach -> Jest poniżej 600px wysokosci strony oraz event to skrollowanie do góry -> gdy jest ponizej 600px a skrollowanie nastepuje w dół to nie wyswietla się. I w tym rzecz ze to osiągnąłem tylko sam efekt przy szybkim skrollowaniu się buguje dlatego że kod jest słaby :/

Udostępnij
Komentuj
Freja Draco
Freja Draco
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 3394
1
Greedri napisał(a):

gdy jest ponizej 600px a skrollowanie nastepuje w dół to nie wyswietla się

Moim zdaniem to nie jest dobry pomysł. Żeby przewinąć w górę musisz wykonać dwie akcje: srkrol o kilka pikseli i dopiero wtedy klik na przycisku.

Udostępnij
Komentuj
Greedri
GR
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 44
0

@Freja Draco: Czyli lepiej po prostu zostawić bardziej statyczne działanie tego przycisku ? Że tylko po niżej konkretnej wielkości niech się pojawi i tyle ? Chciałem zrobić taki WoW przycisk (Mimo że mój skill w JS jest na poziomie 0). Może i faktycznie, czasem prostota jest lepsza :/

Udostępnij
Komentuj
Greedri
GR
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 44
0

Jest wstanie ktoś mi wytłumaczyć czemu funkcje w funkcji "functionWithScroll" gryzą się ze sobą ? Obie funkcje odzielnie wywołane bezpośrednio w body na onscroll działają. Natomiast połączone w funkcji która jest wywołana w body, changemenu przestaje działać :/

Kopiuj
function functionWithScroll(){
    changeMenu();
    ejectScrollUP();
}


function ejectScrollUP(){
    zg_pokaz_strzalke_przy   = 600;
    zg_przewiniete_okno_stan = 0;

    window.onscroll=window_onscroll;

    function window_onscroll() {
        zg_okno_skroll_od_gory=window.pageYOffset;
        var czy_przeskok_przewinieca=0;
        if (zg_przewiniete_okno_stan==0) {
            if (zg_okno_skroll_od_gory>=zg_pokaz_strzalke_przy) {
            czy_przeskok_przewinieca=1;
            zg_przewiniete_okno_stan=1; 
            }
        } else {
            if (zg_okno_skroll_od_gory<zg_pokaz_strzalke_przy) {
            czy_przeskok_przewinieca=1;
            zg_przewiniete_okno_stan=0; 
            }
        }
        if (czy_przeskok_przewinieca==1) hideOrShow();
    }

    function hideOrShow(scrollUP = document.getElementById("scrollUP")) {
        if (zg_okno_skroll_od_gory<zg_pokaz_strzalke_przy) {
            scrollUP.style.visibility="hidden";
            scrollUP.classList.remove("scrollUP2");
        } else {
            scrollUP.style.visibility="visible";
            scrollUP.classList.add("scrollUP2"); 
            }
    }

}

function changeMenu(){
    var cos = document.getElementById("navigation");
    var logo = document.getElementById("logo");
    var newMenuItem = document.getElementsByClassName("menu-item");

    if( window.innerWidth > 990 && window.scrollY > 50){

            cos.classList.add("changed-nav");
            logo.classList.add("changed-logo");
            newMenuItem[0].classList.add("menu-item-changed");

    }
    else{
        cos.classList.remove("changed-nav");
        logo.classList.remove("changed-logo");
        newMenuItem[0].classList.remove("menu-item-changed");
    }

}
Udostępnij
Komentuj
szatkus
szatkus
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 227
0

Możesz sobie ustawić transition i w zależności od pozycji scrolla ustawiać właściwość transform. Animacją to już zajmie się przeglądarka.

https://jsfiddle.net/w3vh8q15/

Udostępnij
Komentuj
Freja Draco
Freja Draco
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 3394
0
Greedri napisał(a):

Jest wstanie ktoś mi wytłumaczyć czemu funkcje w funkcji "functionWithScroll" gryzą się ze sobą ?

A jak je wywołujesz? Pokaż całość kodu.

Udostępnij
Komentuj
Greedri
GR
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 44
0

@Freja Draco:

Kopiuj
<body onload="showDate()" onscroll="functionWithScroll()">

a funkcje JS wysłałem wcześniej

Udostępnij
Komentuj
Greedri
GR
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 44
0

@Freja Draco:
JS

Obecnie taki kod funkcjonuje na stronie, przycisk z skrollowaniem do góry działa, natomiast zmiana menu niestety nie. Gdy z function functionWithScroll() wyrzuce ejectScrollUP();, to changeMenu(); zaczyna działać.

Kopiuj
function showDate(){
    const date = new Date();
    const divDate = document.getElementById("date");
    const spanDate = document.getElementById("date2");

    var dayOfMonth = date.getDate();
    if(dayOfMonth < 10){
        dayOfMonth= "0"+dayOfMonth;
    }
    var month = date.getMonth()+1;
    if(month < 10){
        month= "0"+month;
    }
    var year = date.getFullYear();

    var dayOfWeek = date.getDay();
    if(dayOfWeek == 0) dayOfWeek="Niedziela";
    if(dayOfWeek == 1) dayOfWeek="Poniedziałek";
    if(dayOfWeek == 2) dayOfWeek="Wtorek";
    if(dayOfWeek == 3) dayOfWeek="Środa";
    if(dayOfWeek == 4) dayOfWeek="Czwartek";
    if(dayOfWeek == 5) dayOfWeek="Piątek";
    if(dayOfWeek == 6) dayOfWeek="Sobota";


    const editDate = dayOfMonth+"."+month+"."+year;

    divDate.innerHTML = editDate;
    spanDate.innerHTML = dayOfWeek;
}

function functionWithScroll(){
    ejectScrollUP();changeMenu();

}


function ejectScrollUP(){
    zg_pokaz_strzalke_przy   = 600;
    zg_przewiniete_okno_stan = 0;

    window.onscroll=window_onscroll;

    function window_onscroll() {
        zg_okno_skroll_od_gory=window.pageYOffset;
        var czy_przeskok_przewinieca=0;
        if (zg_przewiniete_okno_stan==0) {
            if (zg_okno_skroll_od_gory>=zg_pokaz_strzalke_przy) {
            czy_przeskok_przewinieca=1;
            zg_przewiniete_okno_stan=1; 
            }
        } else {
            if (zg_okno_skroll_od_gory<zg_pokaz_strzalke_przy) {
            czy_przeskok_przewinieca=1;
            zg_przewiniete_okno_stan=0; 
            }
        }
        if (czy_przeskok_przewinieca==1) hideOrShow();
    }

    function hideOrShow(scrollUP = document.getElementById("scrollUP")) {
        if (zg_okno_skroll_od_gory<zg_pokaz_strzalke_przy) {
            scrollUP.style.visibility="hidden";
            scrollUP.style.transitionDuration="0s";
            scrollUP.classList.remove("scrollUP2"); 
        } else {
            scrollUP.style.transitionDuration="1s";
            scrollUP.style.visibility="visible";
            scrollUP.classList.add("scrollUP2"); 
            }
    }
}

function changeMenu(){
    var cos = document.getElementById("navigation");
    var logo = document.getElementById("logo");
    var newMenuItem = document.getElementsByClassName("menu-item");

    var YY=window.scrollY;
    
    if( window.innerWidth > 990 && YY > 50){

            cos.classList.add("changed-nav");
            logo.classList.add("changed-logo");
            newMenuItem[0].classList.add("menu-item-changed");

    }
    else{
        cos.classList.remove("changed-nav");
        logo.classList.remove("changed-logo");
        newMenuItem[0].classList.remove("menu-item-changed");
    }

}

function buttonScrollUP(){
    window.scrollTo(0, 0);
    window.scroll({
        top: 0, 
        left: 0, 
        behavior: 'smooth'
      });
}

HTML

Kopiuj
<!DOCTYPE html>
<html lang="pl-PL">

<head>
    <title>Afryka blog podróżniczy</title>
    <meta name="description" content="Podróże śladami Stasia i Nel. Kenia, Egipt, Sudan, Etiopia. AfTravel, Lubartów, tel 123123123" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <meta name="copyright" content="Copyright Kamil" />
    <meta charset="utf-8"/>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Bungee&family=Eczar&family=Patua+One&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="style/bootstrap.min.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="style2.css" type="text/css" />
	<link rel="icon" href="images/afrika.png" />
    <link rel="stylesheet" href="icons/css/fontello.css" type="text/css" />
    <script src="js2.js" ></script>

</head>



<body onload="showDate()" onscroll="functionWithScroll()">
<div">    

    <div class="start-background">

        <header id="navigation">
            <h1 class="item-unvisible">Af-Travel</h1>

            <a href="index.html" class="navbar-brand"><img src="images/afrika.svg" alt="Af-Travel logo" class="logo" id="logo"/></a>

            <nav id="nav" class=" navbar-expand-lg navigation  ">
                <button id="button-nav" class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navContent">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <ul id="navContent" class="collapse navbar-collapse menu-item" >
                    <li class="item" ><a href="index.html" class="nav-item-first nav-item nav-link">Start</a></li>
                    <li class="item" ><a href="#" class="nav-item nav-link">Katalog</a></li>
                    <li class="item" ><a href="#" class="nav-item nav-link">Poradnik</a></li>
                    <li class="item" ><a href="#" class="nav-item nav-link">O nas </a></li>
                    <li class="item" ><a href="#" class="nav-item-last nav-item nav-link">Kontakt</a></li>
                </ul>

            </nav>

        </header>

    </div>

    <main>
        <section class="main-section">
            <h2 class="main-title">Wyprawy z Af-Travel</h2>
            <div class="main-section-description">
                <span>
                    Zacznij przygodę życia już dziś !
                </span>
                <span>
                    Marzysz o Afryce? Przygotuj się na swoją najlepszą podróż życia ! Poznaj piękno afrykańskiego kontynentu razem z nami. Gotowa? Gotowy?
                </span>
            </div>

            <aside>
                <div class="main-section-aside">
                    <a href="">Katalog podróży <i class="demo-icon icon-right-thin"></i></a>
                </div>
            </aside>

        </section>

        <section>
            <div class="kontent">dad</div>
            <div class="kontent2">dad</div>
        </section>

    </main>

    <div id="margin"></div>

    <footer>

        <div class="footer-top">       
            <a href="mailto:kamil514@op.pl" target="_blank"><span><i class="demo-icon icon-mail"></i></span></a>
            <a href="https://www.facebook.com" target="_blank"><span><i class="demo-icon icon-facebook-circled"></i></span></a>
            <a href="https://www.youtube.com" target="_blank"><span><i class="demo-icon icon-youtube-play"></i></span></a>
        </div>

        <hr class="lane-footer">

        <div class="footer-bottom">

            <div class="footer-bottom-leftSide">

                
                <a href="index.html">
                <div class="footer-bottom-leftSide-logo">
                    Af-Travel
                </div></a>

            </div>

            <div class="footer-bottom-rightSide">

                <span><a href="index.html">Start</a></span>
                <span><a href="" >Blog</a></span>
                <span><a href="" >Placówki</a></span>
                <span><a href="" >Partnerzy</a></span>
                <span><a href="" >Kontakt</a></span>

                <div class="footer-bottom-rightSide-copyright">
                    <span>Kamil Wójcik &copy; 2021r - Wszelkie prawa zastrzeżone. </span>
                </div>

                <div class="button-investors">
                        <div class="button">
                            <a href="https://investors.pl" target="_blank">
                                <img src="images/investor.png" alt="logo-investor" class="logo-investor">
                                <span class="text-investor">Investors</span>
                            </a>
                        </div>
                </div>

                

            </div>  

        </div>

        <div class="footer-timer">
            <time id="date"></time>
            <span id="date2"></span>
        </div>

    </footer>

    <div class="scrollUP" id="scrollUP">
        <a onclick="buttonScrollUP()"><i class="demo-icon icon-up-circled"></i></a>
    </div>


</div>

<script src="js/jquery-3.2.1.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>


</html>
Udostępnij
Komentuj
Freja Draco
Freja Draco
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 3394
0

Bo jak uruchamiasz window.onscroll=window_onscroll; to on najpewniej nadpisuje przypisanie <body onscroll="functionWithScroll()">.

W ogólności najlepiej używać addEventListener https://www.w3schools.com/jsref/met_element_addeventlistener.asp
bo wtedy kolejne funkcje przypisane do zdarzeń nie będą się ze sobą gryźć.
Ale ogólnie to namotałeś, umieściłeś deklaracje funkcji w wywoływanej funkcji. Trzeba by to przerobić, ale widzę, że faktycznie słabo kumasz JS a nie chce mi się mentorzyć ;)

Udostępnij
Komentuj

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto