如何使导航栏及其元素根据悬停和滚动而变化？

问：

嗨，我正在制作一个导航栏，该导航栏会根据悬停和 . 以下是要求：scrollY

when scrollY > 0 (That means, navbar not on top):
    navbar bg-color -> "#fff"    
    children (a, i, p tags) color -> "#000"    
    when child hovered:
       child color -> "ff7bac" 
and that is whiteNavbar() function, it is done and it's working. now I need to do: 
when scrollY <= 0 (navbar on top):
    navbar bg-color -> rgba(0, 0, 0, 0.2)
    children color -> "#fff"
    when navbar hovered:
        navbar bg-color -> "#fff"
        children color -> "#000"
    when child hovered:
        child color -> "ff7bac"

当导航栏和子项悬停时，当没有悬停时，scrollY <= 0，当导航栏悬停且滚动时，Y <= 0 或当 scrollY > 0 时

JS代码：

let navbar = document.querySelector('.navbar');
let navbar_tags = navbar.querySelectorAll("p, i, a");
let navbar_products = document.querySelector('.navbar-products');
let children = [...navbar_tags, navbar_products];
let timeout_n;

function whiteNavbar() { 
    navbar.style.backgroundColor = '#fff';
    children.forEach(child => {
        child.style.color = "#000";
        child.addEventListener('mouseover', function() {
            this.style.color = "#ff7bac";
        });
        child.addEventListener('mouseout', function() {
            this.style.color = "#000";
        });
    });
}

function transparentNavbar() {
    
}

function changeNavbarColor() {
    const scrollY = window.scrollY;
    if (scrollY > 0) {
        whiteNavbar();
    }
    else {
        transparentNavbar();
    }
}


transparentNavbar();
window.addEventListener('scroll', function () {
    clearTimeout(timeout_n);
    timeout_n = setTimeout(changeNavbarColor, 10);
});

一开始我是用CSS完成的，但是当scrollY>0时，我不得不切换到JS来添加功能 当与函数类似时，一切正常，除了导航栏事件与子事件重叠，并且子颜色 -> “ff7bac” 停止工作。 法典：whiteNavbar()

function transparentNavbar() {
    navbar.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
    children.forEach(child => {
        child.style.color = "#fff";
        child.addEventListener('mouseover', function() {
            this.style.color = "#ff7bac";
        });
        child.addEventListener('mouseout', function() {
            this.style.color = "#fff";
        });
    });

    navbar.addEventListener('mouseover', function() {
        this.style.backgroundColor = '#fff';
        children.forEach(child => {
            child.style.color = "#000";
        });
    });

    navbar.addEventListener('mouseout', function() {
        this.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
        children.forEach(child => {
            child.style.color = "#fff";
        });
    });
}

这是最好的版本^^，除了子色之外几乎有效 - 悬停时>“#77bac”

我试过了，但随后导航栏悬停 bg-color 更改，停止工作。stopPropagation()