如何使navbar及其元素根据hover和scrollY而变化？

Question

嗨，我正在制作一个根据悬停和

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"

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来添加功能 当执行与

whiteNavbar()

功能类似的操作时，一切正常，除了导航栏事件与子事件重叠，并且子颜色 ->“ff7bac”停止工作。 代码：

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”

我尝试了

stopPropagation()

，但随后导航栏悬停背景颜色更改，停止工作。

Answer 1

我认为你可以用Css来简化这个逻辑，而不是完全依赖JS事件。我只需创建一个类，该类将负责设置导航栏背景和子链接的样式。

由于您没有提供完整的代码，我添加了

position sticky

和

top: 0

来显示完整的工作示例。以下是您可以如何做到的。

let timeout_n; // Define timeout_n variable

const navbar = document.querySelector('.navbar');
const navbarTags = navbar.querySelectorAll("p, i, a");

function whiteNavbar() {
    navbar.classList.add('white-bg');
    navbarTags.forEach(child => {
        child.classList.add('white-text');
    });
}

function transparentNavbar() {
    navbar.classList.remove('white-bg');
    navbarTags.forEach(child => {
        child.classList.remove('white-text');
    });
}

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

/* Initial styles for navbar */
.navbar {
    top:0;
    position: sticky;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    border: 1px solid;
}

/* Styles when navbar is white */
.navbar.white-bg {
    background-color: #fff;
    color: #000;
}

/* Styles for child elements when navbar is white */
.navbar.white-bg p,
.navbar.white-bg i,
.navbar.white-bg a {
    color: #000;
}

/* Hover styles for child elements when navbar is white */
.navbar.white-bg p:hover,
.navbar.white-bg i:hover,
.navbar.white-bg a:hover {
    color: #ff7bac;
}

/* Hover styles for navbar when navbar is white */
.navbar.white-bg:hover {
    background-color: #fff;
}

<div class="navbar">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <i>Icon</i>
  <p>Paragraph</p>
</div>

<br/>
<br/>
<br/>
<br/>
<br/>

<br/>
<br/>
<br/>
<br/>
<br/>

<br/>
<br/>
<br/>
<br/>
<br/>

<br/>
<br/>
<br/>
<br/>
<br/>