导航栏问题：::before 不会在链接下划线，并且使用 JavaScript 向上滚动时颜色不会改变

Question

我只写了几个月的代码，这个周末运行遇到了麻烦。

问题一：我试图在导航栏链接上添加悬停效果，使它们带有下划线，并且该行从左侧开始向右移动，仅覆盖文本。不幸的是，没有任何反应！我试过移动代码的位置，也试过使用带有边框底部的悬停，这确实有效，但没有达到预期的效果。

问题二：我试图让它在滚动页面时，在某一点之后导航栏变成黑色，文本变成白色。我遵循了在这里和在线找到的一些教程，但似乎无法弄清楚我做错了什么。

非常感谢您的帮助！谢谢！！

HTML:
<!-- Nav Bar -->
        <nav role="navigation" id="navbar">
            <!-- Logo -->
            <img src="./public/img/logo.png" alt="HONGO Homepage" class="logo">
            <!-- NavLinks -->
            <div id="section-list">
                <a href="#" class="active">Home</a>
                <a href="#about">About</a>
                <a href="#recent-products">Shop</a>
                <a href="#testimonials">Testimonials</a>
                <a href="#blog">Journal</a>
                <a href="#contact" id="contact-link">Contact</a>
            </div>
            <!-- Quick Links -->
            <div id="mainIcons">
                <i class="fas fa-search" id="iconSearch" alt="Search" ></i>
                <i class="far fa-user" id="iconUserLogin" alt="User Login" data-bs-toggle="modal" data-bs-target="#userLogin"></i>
                <i class="far fa-heart" id="iconLikes" alt="Liked Items"></i>
                <i class="fas fa-shopping-cart" id="iconShoppingCart" alt="Shopping Cart"></i>
                <i class="far fa-moon" id="iconDarkMode" alt="Dark Mode"></i>
            </div>
        </nav>

SASS:
    nav
        position: fixed
        top: 0
        left: 0
        width: 100%
        background-color: #F5EDE2
        display: flex
        z-index: 2
        border-bottom: 1px solid lightgrey
        .black-nav
            background-color: black
            color: white   
        img
            margin: 22px 15px 25px
            height: 100%
            width: 10%
        #section-list
            width: 75%
            margin-top: 22px
            text-align: center
            a
                font-family: "Poppins-Med"
                font-size: 13px
                color: black
                text-transform: uppercase
                text-decoration: none
                margin-right: 35px
                position: relative
                .active
                    border-bottom: solid 1px black 
                &::before
                    content: ""
                    position: absolute
                    background-color: black
                    bottom: 0
                    height: 1px
                    width: 0%
                    right: 100%
                    transition-property: right
                    transition-duration: .5s
                    transition-timing-function: ease-out
                    z-index: 2
                &:hover::before
                    right: 0     
            #contact-link
                margin-right: 0px
        #mainIcons 
            font-size: 12px  
            margin-top: 22px
            i
                padding-right: 8px

JavaScript:
let scrollUp = document.getElementById("navbar");

window.onscroll = function () {
    "use strict";
    if (document.body.scrollTop >= 200 || document.documentElement.scrollTop >= 200) {
        scrollUp.classList.add("black-nav");
    } else {
        scrollUp.classList.remove("black-nav");
    }
};

Answer 1

我将 black-nav 部分移除到导航样式之外，并为 white-nav 和 black-nav 添加了单独的类。

首先将导航设置为white-nav:

<nav role="navigation" id="navbar" class="white-nav">

更新 SASS 添加了 black-nav 和 white-nav 样式：

nav
    position: fixed
    top: 0
    left: 0
    width: 100%
    background-color: #F5EDE2
    display: flex
    z-index: 2
    border-bottom: 1px solid lightgrey
    img
      margin: 22px 15px 25px
      height: 100%
      width: 10%
    #section-list
      width: 75%
      margin-top: 22px
      text-align: center
      a
        font-family: "Poppins-Med"
        font-size: 13px
        text-transform: uppercase
        text-decoration: none
        margin-right: 35px
        position: relative
        &::before
          content: ''
          position: absolute
          right: 0
          bottom: 0
          display: block
          width: 0%
          height: 1px
          transition: width 300ms linear
          transition-duration: .5s
          transition-timing-function: ease-out
          z-index: 2
        &:hover::before
          width: 100%
          left: 0
          right: auto
      #contact-link
        margin-right: 0px
      #mainIcons 
        font-size: 12px  
        margin-top: 22px
        i
          padding-right: 8px
.black-nav
  background-color: black
  a
    color: white
    .active
      border-bottom: solid 1px white
    &::before
      background-color: white
    
.white-nav
  a
    color: black
    .active
      border-bottom: solid 1px black
    &::before
      background-color: black

根据需要添加和删除 white-nav 和 black-nav：

let scrollUp = document.getElementById("navbar");

window.onscroll = function() {
  "use strict";
  if (document.body.scrollTop >= 200 || document.documentElement.scrollTop >= 200) {
    scrollUp.classList.add("black-nav");
    scrollUp.classList.remove("white-nav");

  } else {
    scrollUp.classList.remove("black-nav");
    scrollUp.classList.add("white-nav");


  }
};

导航栏问题：::before 不会在链接下划线，并且使用 JavaScript 向上滚动时颜色不会改变

Navbar trouble: the ::before doesn't underline the links and the colors don't change when scrolling up using JavaScript

javascript

sass

navigation

nav

pseudo-element