Hallo zusammen,
ich bin aufgrund meiner Frage auf dieses Forum gestoßen und, wie ihr seht, ganz neu hier. JavaScript und jQuery sind mir auch noch relativ neu (was man sicher an meinem Code sieht 
). Aber zu meiner Frage:
Ich habe eine horizontale Hauptnavigation auf meiner Website, deren Aussehen und Verhalten sich je nach Screen-Größe und beim Runterscrollen ändert. Die Navigationsleiste hat die CSS Position: fixed. On scroll bzw. resize passen sich die Größe meines Logos und Hintergrundfarbe der Navigation an. Ab einer bestimmten Größe gibts dann keine horizontale Reihe von Links mehr, sondern ein Burger-Icon (mobile menu). Hier liegt mein Problem: manchmal öffnet sich, wenn man dieses anklickt, wie geplant das Dropdown Menü mit den Links und manchmal nicht.
Getestet wann der Fehler auftritt hab ich durch hoch- und runter scrollen, verschiedene Screen-Größen, reload, resize, console.log verschiedener Werte... aber der Fehler erscheint mir relativ zufällig. Ich finde jedenfalls kein Muster. Manchmal lässt sich das Menü wunderbar anklicken, manchmal geht es nicht, dann scrollt man wieder und es geht, manchmal geht es nach dem Scrollen nicht, etc.
Vielleicht sieht jemand von euch mehr. (Da mir das alles noch relativ neu ist bin ich auch für generelle Tipps zu meinem Code dankbar. Könnte man sicher besser machen.)
Die onClick Funktion, um die es geht, ist diese:
$(".burger-nav").on("click", function() {
$("#main-nav ul").toggleClass("open");
});Sie befindet sich in dieser Funktion, die durch die Events document.ready, resize und on.scroll feuern soll:
function checkWidth() {
let windowWidth = $(window).width();
let maxWidth = 1220;
var menu = document.getElementById("main_menu");
var logo = document.getElementById("mad-logo");
if (windowWidth < maxWidth) {
// do stuff for small screens
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
$(".burger-nav").on("click", function() {
$("#main-nav ul").toggleClass("open");
});
logo.width = '180';
menu.style.backgroundColor = 'rgba(0,0,0,0.8)';
} else {
//burger icon
$(".burger-nav").on("click", function() {
$("#main-nav ul").toggleClass("open");
});
logo.width = '250';
menu.style.backgroundColor = 'rgba(0,0,0,0.8)';
}
} else if (windowWidth > maxWidth) {
// do stuff for big screens
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
menu.style.backgroundColor = 'rgba(0,0,0,0.8)';
logo.width = '200';
} else {
menu.style.backgroundColor = 'rgba(0,0,0,0)';
logo.width = '300';
}
}
}Danke schonmal fürs Lesen bis hierher. Bin für Tipps echt dankbar. 