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