Wie kann ich diese zwei Funktionen miteinander verbinden?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

art_spell_

Neues Mitglied
10 September 2019
3
0
1
24
Guten Tag Liebe Community,

ich habe mir diese zwei Funktionen(?), mit Hilfe von Tutorials, zusammen gebastelt.
Jedoch öffnet sich die Navigation im Handymodus (die burger Klasse), wenn sie runter gescrollt wird nicht.
Vielleicht wegen der zweiten Funktion.
Nun weiß ich leider nicht wie zwei Funktionen miteinander verbunden werden können, bzw wie dieses Problem gelöst werden kann und hoffe auf Hilfe.

JavaScript:
const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');
   
burger.addEventListener('click',() => {
    nav.classList.toggle('nav-active');                    
     
    //Animate Links
     navLinks.forEach((link, index) => {
        if (link.style.animation) {
            link.style.animation = ''
        } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
        }
    });
   
    // Burger Animation
   burger.classList.toggle('toggle');

});
   
}
navSlide();


window.addEventListener("scroll", function () {
    const logoImage = document.querySelector('.logo img');
    const mainNav = document.getElementById("main-nav");
   
    if (window.pageYOffset > 0){
        logoImage.style.height = "44px";
        mainNav.classList.add('bg-black');
        mainNav.classList.add('txt-white');
       
       
    } else{
        logoImage.style.height = "64px";
      mainNav.classList.remove('bg-black');
       mainNav.classList.remove('txt-white');
     
    }
 
});





HTML:
    <header class="main-header">
       
   
       
       
        <nav id="main-nav">
           
            <div class="logo">
               <img id="logo" src="illustrationen/logo.png" alt="Boschenas Wäscherei und Reinigung">
            </div>
           
            <ul class="nav-links">
         
                <li>
                    <a href="#">Starseite</a>
                </li>
                <li>
                    <a href="#">Leistung und Service</a>
                </li>
                <li>
                    <a href="#">Lieferservice</a>
                </li>
                <li>
                    <a href="#">Kontakt</a>
                </li>
             
            </ul>
            <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>
     
                 </nav>
         
          </header>
 
Zuletzt bearbeitet:

basti1012

Aktives Mitglied
26 November 2017
903
97
28
38
Minden
sebastian1012.bplaced.net
Hast du das vieleicht schon online ?
Mit den vorhandenen Daten konnte ich es so weit nachbauen, doch bei mir klappte es soweit alles.Kann auch sein das meine Css ganz anders aussieht und so weiter.
Wäre nicht schlecht wenn du schon was online hast oder bei Codepen dein problem zeigen kannst
 

art_spell_

Neues Mitglied
10 September 2019
3
0
1
24
Hallo Basti,
Vielen Dank für die Antwort und die Mühe!

Hast du das vieleicht schon online ?
Mit den vorhandenen Daten konnte ich es so weit nachbauen, doch bei mir klappte es soweit alles.Kann auch sein das meine Css ganz anders aussieht und so weiter.
Wäre nicht schlecht wenn du schon was online hast oder bei Codepen dein problem zeigen kannst
Ich habe es jetzt online gestellt. Ich versuche auch schon einmal den Fehler zu finden und würde mich freuen, wenn du mal drüber schauen könntest.

https://codepen.io/Joa77a/pen/rNBvYbr
 

basti1012

Aktives Mitglied
26 November 2017
903
97
28
38
Minden
sebastian1012.bplaced.net
Schön das du es selber hinbekommen hast .
Aber leid tut muß dir das nicht , sowas kann jeden passiern das kleine Fehler im Code sind die man einfach übersieht.
Ich glaub das ist jeden schon mal passiert. Außerdem tut man durch Fehler lernen und weiß es beim nächsten mal dann besser.
Wenn mal wieder was ist dann meld dich