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

Question

I have only been coding a couple of months and am running into trouble this weekend.

Issue One: I have tried to put a hover effect on the navbar links so that they become underlined and the line starts at the left and moves to the right, only covering the text. Unfortunately, nothing occurs! I have tried moving the location of the code and also tried using the hover with a border-bottom, which does work but doesn't give the desired effect.

Issue Two: I have tried to make it so that as one scrolls the page, after a certain point the navbar turns black and the text turns white. I have followed a couple of tutorials I found here and online but cannot seem to figure out what I am doing wrong.

Your help is greatly appreciated! Thank you!!

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

I removed the black-nav part to outside the nav style and added separate classes for white-nav and black-nav.

Set the nav as white-nav at first:

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

Updated SASS with added black-nav and white-nav styling:

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

Add and remove the white-nav and black-nav as needed:

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


  }
};