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

Wie kann ich diese zwei Funktionen miteinander verbinden?

art_spell_

Neues Mitglied
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:
Werbung:
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
 
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
 
Werbung:
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
 
Zurück
Oben