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

Nieprawidłowy kod JSS - header na reaguje na scroll-up/ down

Mały hosting, OGROMNE możliwości
0 głosów
638 wizyt
pytanie zadane 14 marca 2022 w JavaScript przez Kufel Nowicjusz (210 p.)

Panowie, mam problem z ustawieniem sekcji nawigacyjnej w sposób aby dzięki JSS na scroll-down sekcja się chowała, a scroll-up opuszczała w dół do wizerunku dla użytkownika.

Działa tylko jedna funkcja poleceń dla pojawiania się menu z prawej strony i chowania się głównej sekcji nawigacji na button.

 

Funkcja dla scrollowania nie działa. :( Uncaught SyntaxError : Unexpected Token '<'

Pomożecie ?

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
        integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <meta name="description" content="">

    <meta name="keywords" content="">
    <title>Document</title>


    <!--FONT-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">

    <!--CSS-->
    <link rel="stylesheet" href="/metabiome.css">

    <!--JAVA-->
    <script type="text/javascript" src="observers.js"> </script>

    <!--FONTAWESOME-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
        integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>


<body>

    <header>
        <div class="header">
            <div class="navbar">
                <a href="index.html"><img class="logo" src="/Logo/Metagen_1.0.png"></a>
                

                <div class="menu">
                    <ul>
                        <li><a href="index.html">Start</a></li>
                        <li><a href="onas.html">O nas</a></li>
                        <li><a href="programy.html">Programy</a></li>
                        <li><a href="#badania">Laboratorium</a></li>
                        <li><a href="kontakt.html">Kontakt</a></li>
                    </ul>
                </div>

                <div class="toggle"></div>

                <div class="menu2">
                    <a href="index.html"><img class="logo3" src="/Logo/Metagen_1.0.png"></a>
                    <ul>
                        <li><a href="index.html">Start</a></li>
                        <li><a href="onas.html">O nas</a></li>
                        <li><a href="programy.html">Programy</a></li>
                        <li><a href="badania.html">Laboratorium</a></li>
                        <li><a href="kontakt.html">Kontakt</a></li>
                    </ul>
                </div>  
            </div>
        </div>
    </header>
    

    
    <script>

        const body = document.body;
            let lastscroll = 0;

            window.addEventListener('scroll' , () => {
                const currentScroll = window.pageYOffset

                if (currentScroll <= 0 {
                    body.classList.remove("scroll-up")
                }

                if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
                    body.classList.remove("scroll-up")
                    body.classList.add("scroll-down")
                }

                if (currenScroll < lastScroll && body.classList.contains("scroll-down")){
                    body.classList.remove("sroll-up")
                    body.classList.add("sroll-down")
                }

            
                lastScroll = currentScroll;

            })
    </script>

    <script>
        
        const menuToggle = document.querySelector('.toggle')
        const menu = document.querySelector('.menu')
        const menu2 = document.querySelector('.menu2')
        const logo = document.querySelector('.logo')
        
        const innerheader = document.querySelector('.innerheader')


            menuToggle.addEventListener('click', () => {
        
            menuToggle.classList.toggle('active')
            menu.classList.toggle('active')
            menu2.classList.toggle('active')
            logo.classList.toggle('active')

        })

    </script>

   
    
</body>




</html>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root{

    --primary-color:
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;

    list-style: none;
    text-decoration: none;
}

html{
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body{
    height: 400vh;
    width: auto;
    overflow: hidden;
  
  background-color: green;
}

/* Header &  Menu & Logo */

.header{
    width: auto;
    height: auto;
}

.navbar{
    width: 100%;
    height: 100px;

    padding: 40px 200px;

    position: fixed;

    top: 0;
    left: 0;

    z-index: 1000;
    
    display: flex;
    align-items: center;

    transition: 0.5s;

    background-color: #012F4A;
}
.navbar a{
    height: 30.84px;

    align-items: center;
}

.menu {
    width: 550px;

    position: absolute;

    top: 40px;
    left: 352px;  
}
.menu.active {
    display: none;
}
.menu ul{
    display: flex;

    position: relative;

    justify-content: space-between;
}
.menu ul li{

    width: auto;
    height: auto;

    position: relative;
}
.menu ul li a {
    text-decoration: none;
    font-size: 1.1em;
    color: white;

    font-weight: 400;

    transition: 0.25s;

    letter-spacing: 1px;
}
.menu ul li a::before{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: white;
    transform-origin: middle;
    transition: transform 0.25s ease-out;
}
.menu ul li a:hover::before{
    transform: scaleX(1);
    transform-origin: middle;
}

.menu2 {

    width: 212.84px;
    height: 100vh;

    padding: 0 40px;
    position: absolute;

    top: 0px;
    right: 0px;

    display: flex;

    flex-direction: column;

    background-color: #012F4A;

    transform: translateX(212.84px);

    transition: 0.4s;
}
.menu2.active{
    transform: translateX(0px);
}
.menu2 ul{
    width: 100%;
    height: 100vh;

    flex-direction: column;

    display: flex;
    justify-content: space-between;

    padding: 325px 0px;
}
.menu2.active ul{

    width: 100%;
    flex-direction: column;

}
.menu2 ul li a {
    width: 100%;

    color: white;
    font-size: 1.2em;
    font-weight: 500;

    transition: 0.25s;
}
.menu2 ul li a:hover{
    color: #9d0208;
    font-size: 1.3em;
}

.logo{
    width: 112px;
    height: 30.84px;

    align-items: center;

    cursor: pointer;

    object-fit: cover;

    transform: scale(1);
    
    transition: 0.25s;
}
.logo:hover{
    transform: scale(1.025); 
}
.logo.active{
    display: none;
}
.logo3{

    width: 112px;
    height: 30px;

    object-fit: cover;

    position: absolute;

    top: 40px;

    transform: scale(1); 

    transition: 0.25s;

    cursor: pointer;
}
.logo3:hover{
    transform: scale(1.025); 
}

.toggle{
    width: 20px;
    height: 30.84px;

    position: absolute;

    top: 40px;
    right: 200px;

    background-color: white;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center;

    filter: invert(1);

    cursor: pointer;
}
.toggle.active {

    background-color: white;
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: center;

    right: 252.84px;

    filter: invert(1);
}

/*** scroll styles header ***/

.scroll-down header {
    transform: translate 3d (0, -100%, 0);
}

    .scroll-up header{
        filter: drop-shadow(0 -10 20px rgb(170,170,170))

    }



<script>
        
        const menuToggle = document.querySelector('.toggle')
        const menu = document.querySelector('.menu')
        const menu2 = document.querySelector('.menu2')
        const logo = document.querySelector('.logo')
        
        const innerheader = document.querySelector('.innerheader')


            menuToggle.addEventListener('click', () => {
        
            menuToggle.classList.toggle('active')
            menu.classList.toggle('active')
            menu2.classList.toggle('active')
            logo.classList.toggle('active')

        })

const body = document.body;
            let lastscroll = 0;

            window.addEventListener('scroll' , () => {
                const currentScroll = window.pageYOffset

                if (currentScroll <= 0 {
                    body.classList.remove("scroll-up")
                }

                if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
                    body.classList.remove("scroll-up")
                    body.classList.add("scroll-down")
                }

                if (currenScroll < lastScroll && body.classList.contains("scroll-down")){
                    body.classList.remove("sroll-up")
                    body.classList.add("sroll-down")
                }

            
                lastScroll = currentScroll;

            })

    </script>

Poniżej załączam kod i link do edytora kodu online:

https://codepen.io/pen/

 

 

 komentarz 14 marca 2022 przez ScriptyChris Mędrzec (190,170 p.)

 Funkcja dla scrollowania nie działa. :( Uncaught SyntaxError : Unexpected Token '<'

Do którego miejsca w kodzie odnosi się ten błąd? 

Poniżej załączam kod i link do edytora kodu online:

Link do CodePen jest "pusty".

 

 komentarz 14 marca 2022 przez ScriptyChris Mędrzec (190,170 p.)

Masz trochę błędów składniowych:

  • w linii 84 brakuje nawiasu zamykającego dla if
  • w linii 79 tworzysz zmienną lastscroll, a w 88 i 93 odnosisz się do niej jako lastScroll
  • w linii 82 tworzysz zmienną currentScroll, a w 93 odnosisz się do niej jako currenScroll

Jak je naprawisz, to dopiero analizuj dlaczego kod nie działa tak, jak chcesz.

 komentarz 14 marca 2022 przez Kufel Nowicjusz (210 p.)

@ScriptyChris, to był link, kod należało wpisać, nie da rady inaczej

 komentarz 14 marca 2022 przez Kufel Nowicjusz (210 p.)
edycja 14 marca 2022 przez Kufel

dzięki, poprawiłem i sam jeszcze znalazłem dwa błędy mianowicie w trzecim warunku "if"

odwróciłem scroll-up na scroll-down i 

to samo niżej scroll-down na scroll-up
 

if (currentScroll < lastScroll && body.classList.contains("scroll-down")){

                    body.classList.remove("scroll-down")

                    body.classList.add("scroll-up")

 

Niestety w dalszym ciągu nie działa, załączam update poprawek. Ewidentnie klasa z CSS
scroll-up/down jest już przypisywana jednak w dalszym ciągu nic się niedziała :(

<script>

        const body = document.body;
            let lastScroll = 0;

            window.addEventListener('scroll' , () => {
                const currentScroll = window.pageYOffset

                if (currentScroll <= 0) {
                    body.classList.remove("scroll-up")
                }

                if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
                    body.classList.remove("scroll-up")
                    body.classList.add("scroll-down")
                }

                if (currentScroll < lastScroll && body.classList.contains("scroll-down")){
                    body.classList.remove("sroll-down")
                    body.classList.add("sroll-up")
                }

            
                lastScroll = currentScroll;

            })
    </script>

    <script>
        
        const menuToggle = document.querySelector('.toggle')
        const menu = document.querySelector('.menu')
        const menu2 = document.querySelector('.menu2')
        const logo = document.querySelector('.logo')
        
        menuToggle.addEventListener('click', () => {
        
            menuToggle.classList.toggle('active')
            menu.classList.toggle('active')
            menu2.classList.toggle('active')
            logo.classList.toggle('active')
    
        })

    </script>

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 603 wizyt
scroll up button
pytanie zadane 8 października 2020 w JavaScript przez napoludniestad.pl Użytkownik (960 p.)
0 głosów
0 odpowiedzi 353 wizyt
2 scroll bary dla jednego diva (jeden na górze, jeden na dole) JQuery, JS
pytanie zadane 11 września 2017 w JavaScript przez raddko Nowicjusz (190 p.)
0 głosów
2 odpowiedzi 616 wizyt
fullscreen page scroll
pytanie zadane 20 lutego 2018 w JavaScript przez Vromix Początkujący (410 p.)

93,715 zapytań

142,629 odpowiedzi

323,261 komentarzy

63,258 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

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

Twierdza Linux. Bezpieczeństwo dla dociekliwych

Aby uzyskać rabat -10%, użyjcie kodu pasja-linux, wpisując go w specjalne pole w koszyku.

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...