(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 }); });