(broken code -> Blinking logo on mobile)
document.addEventListener("DOMContentLoaded", function () {
const sections = document.querySelectorAll('.section'); // Replace '.section' with the class or ID of your sections
const navbar = document.querySelector('.navbar'); // Replace '.navbar' with your navbar selector
const menuMobile = document.querySelector('.menu-mobile'); // Replace with your menu-mobile selector
const defaultLogo = document.querySelector('#site-logo'); // Default logo
const whiteLogo = document.querySelector('#logo-white'); // White logo
const body = document.body; // Select the body element
// Function to toggle logo and menu styles based on the body background color
const handleInitialBodyColor = () => {
const bodyBackgroundColor = window.getComputedStyle(body).backgroundColor;
if (bodyBackgroundColor === "rgb(250, 249, 244)") {
// If body background is #FAF9F4
defaultLogo.style.display = "block";
whiteLogo.style.display = "none";
if (menuMobile) {
menuMobile.classList.add('txt-color-black');
}
} else if (bodyBackgroundColor === "rgb(170, 145, 255)" || bodyBackgroundColor === "rgb(17, 17, 18)") {
// If body background is #AA91FF or #111112
defaultLogo.style.display = "none";
whiteLogo.style.display = "block";
if (menuMobile) {
menuMobile.classList.remove('txt-color-black');
}
} else {
// Default case
defaultLogo.style.display = "block";
whiteLogo.style.display = "none";
if (menuMobile) {
menuMobile.classList.remove('txt-color-black');
}
}
};
// Function to check the closest section to the navbar
const toggleLogoAndMenu = () => {
let logoChanged = false;
sections.forEach(section => {
const sectionRect = section.getBoundingClientRect();
const navbarRect = navbar.getBoundingClientRect();
const isTouching = sectionRect.top <= navbarRect.bottom && sectionRect.bottom > navbarRect.top;
const backgroundColor = window.getComputedStyle(section).backgroundColor;
if (isTouching) {
if (backgroundColor === "rgba(0, 0, 0, 0)") {
// Transparent background, use default styles
defaultLogo.style.display = "block";
whiteLogo.style.display = "none";
if (menuMobile) menuMobile.classList.add('txt-color-black');
logoChanged = true;
} else if (backgroundColor === "rgb(170, 145, 255)" || backgroundColor === "rgb(17, 17, 18)") {
// If background is #AA91FF or #111112
defaultLogo.style.display = "none";
whiteLogo.style.display = "block";
if (menuMobile) menuMobile.classList.remove('txt-color-black');
logoChanged = true;
} else if (backgroundColor === "rgb(250, 249, 244)") {
// If background is #FAF9F4
defaultLogo.style.display = "block";
whiteLogo.style.display = "none";
if (menuMobile) menuMobile.classList.add('txt-color-black');
logoChanged = true;
}
}
});
// If no sections are touching or none match, reset to default styles
if (!logoChanged) {
defaultLogo.style.display = "block";
whiteLogo.style.display = "none";
if (menuMobile) menuMobile.classList.remove('txt-color-black');
}
};
// Add scroll and resize event listeners
window.addEventListener("scroll", toggleLogoAndMenu);
window.addEventListener("resize", toggleLogoAndMenu);
// Initial checks
window.addEventListener("load", () => {
handleInitialBodyColor(); // Check body background color on initial load
toggleLogoAndMenu(); // Handle any immediate intersection
});
});
Menu