Wie ändere ich die Textfarbe von Navmenu beim Scrollen? ⇐ JavaScript

[Guest]

Ich entwickle eine Website auf Webflow und das feste Navigationsmenü sollte die Schriftfarbe (schwarz oder weiß) entsprechend dem Hintergrund des Abschnitts (hell oder dunkel) ändern. Ich verwende einen benutzerdefinierten JS-Code:

Code: Select all

/* Changing Colors and Logo by Section */
function checkSectionTheme() {
var pos = $(window).scrollTop();

$('.theme-white, .theme-dark').each(function () {
var pos_top = $(this).offset().top; // Use offset() for more accuracy
var pos_bottom = pos_top + $(this).outerHeight();
var class_name = $(this).hasClass("theme-white") ? "white" : "color";

// Debugging positions
console.log({
currentScroll: pos,
sectionTop: pos_top,
sectionBottom: pos_bottom,
sectionClass: class_name
});

if (pos >= pos_top && pos < pos_bottom) {
if (class_name === "white") {
$("body").removeClass("color").addClass("white");
} else {
$("body").removeClass("white").addClass("color");
}
}
});
}

// Run function on page load and scroll
$(document).ready(function () {
checkSectionTheme();
$(window).on("scroll", checkSectionTheme);
});

Es funktioniert teilweise: Das Theme-Dark (sollte schwarze Schrift haben) macht es erst richtig, wenn wir aufhören zu scrollen. Während wir scrollen, wird die Schriftart weiß, genau wie die themenweißen Abschnitte. Für die themenweißen Abschnitte funktioniert es perfekt.
Was fehlt mir hier?
Als ich genau diesen Code zum ersten Mal ausprobierte, funktionierte er perfekt . Ich gehe davon aus, dass es nicht mehr richtig funktioniert, weil ich in demselben Abschnitt viel Inhalt hinzugefügt habe (um den gleichen nahtlosen Hintergrund beizubehalten), aber der JS-Code sollte die Höhe neu berechnen.