Possible to get anchor links in navbar to show as active when scrolling to / past section?

Site URL: https://www.kimberleyhorng.com/

Hi all,

On this site's navbar, the links scroll down to anchors that I added to the top of each section (About, Yoga Nidra, etc). As of now, as long as I am on the home page, "Home" is the active link, even if I click through the other links on the navbar. I wanted to know if it is possible to have the "active" link change color from pink to gold when scrolling past that section of the site, or when clicking the links. Is this achievable with my current setup?

Here is the Custom CSS I've added to my site so far:

/* move shopping cart all the way right */
@media(min-width:1024px){
  .header-actions.header-actions--right{
    display: flex !important;
    .header-actions-action--cta{
      order: 1 !important;
    }
    .showOnDesktop{
      order: 2 !important;
    }
  }
}

/* Hide items: 4, 5, 6... from Left Menu */
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) {
  display: none;
}

/* Hide items: 1, 2, 3 from Right Menu */
.header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) {
  display: none;
}

/* set space between menu items */
  .header-nav-item:nth-child(n) {
    margin-right: 2vw;
}

/* Equal space between right nav items, social icons, button */
div.header-actions-action--cta {
    margin-left: 1.5vw !important;
}
div.header-actions-action--social a {
    margin: 0 !important;
    margin-left: 1.5vw !important;
}
div.header-actions nav.header-nav-list div:last-child {
    margin-right: 0px !important;
}
.header-nav-list {
    width: 100%;
}
div.header-nav-wrapper nav {
    justify-content: flex-end;
}
div.header-nav-wrapper nav div.header-nav-item:nth-child(2) {
    margin-right: 0 !important;
}

/*add space between second and third item*/
div.header-nav-wrapper nav div.header-nav-item:nth-child(2) {
    margin-right: 1.6vw !important;
}

/*FONT COLORS*/
.header-nav-item--active a {
colour: DED398;
}

header-nav-item a {
color:~"hsla(var(--accent-hsl), 1)" !important;
}


/*SCROLL BEHAVIOR*/
/* scroll to very top of section */
html {
    scroll-padding-top: 8vw!important;
  }
/* smooth scroll to section */
html {
	scroll-behavior: smooth;
}

And the Footer Code Injection:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().appendTo('.header-display-desktop .header-actions.header-actions--right');
})
</script>

Hey @jillness, this would require some Custom Javascript to calculate the scroll position and change the active link. Alternatively I would recommend the Pinned Page Navbar Plugin to achieve similar. (Affiliate Link)