Как изменить цвет текста Navmenu при прокрутке?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как изменить цвет текста Navmenu при прокрутке?

Сообщение Anonymous »

Я разрабатываю веб-сайт на Webflow, и фиксированное меню Navmenu должно менять цвет шрифта (черный или белый) в зависимости от фона раздела (светлый или темный). Я использую собственный код JS:

Код: Выделить всё

/* 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);
});

Частично это работает: темная тема (должна иметь черный шрифт) только работает правильно, когда мы прекращаем прокрутку. При прокрутке шрифт становится белым, как и белые разделы темы. Для разделов с белой темой он работает отлично.
Что мне здесь не хватает?
Когда я впервые попробовал именно этот код, он работал отлично. . Я предполагаю, что он перестал работать правильно, потому что я добавил много контента в этот же раздел (чтобы сохранить тот же бесшовный фон), но код JS должен пересчитать высоту.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -scrolling
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»