links to sections in the same page

i want to link my navbar to sections in the same page and when that sections comes into the viewport ,the list element linked to that section should have a change in color, how do i do this using css?

      <nav class="navbar">
            <ul>
                  <li><a href="#">HOME</a></li>
                  <li><a href="#browse-topics">BROWSE TOPICS</a></li>
                  <li><a href="#how-it-works">HOW IT WORKS</a></li>
                  <li><a href="#faqs">FAQS</a></li>
                  <li><a href="#contact">CONTACT</a></li>
                  <li><a href="#pages">PAGES</a></li>
            </ul>
      </nav>

      <nav class="navbar">
            <ul>
                  <li><a href="#">HOME</a></li>
                  <li><a href="#browse-topics">BROWSE TOPICS</a></li>
                  <li><a href="#how-it-works">HOW IT WORKS</a></li>
                  <li><a href="#faqs">FAQS</a></li>
                  <li><a href="#contact">CONTACT</a></li>
                  <li><a href="#pages">PAGES</a></li>
            </ul>
      </nav>

Ἔ

ἔρως•6/15/24, 1:45 PM

almost

Ἔ

ἔρως•6/15/24, 1:46 PM

what's your css stack?

Ἔ

ἔρως•6/15/24, 1:46 PM

it's possible to do something like this:

Ἔ

ἔρως•6/15/24, 1:47 PM

but the "home" won't work unless you put an actual link, like this

Ἔ

ἔρως•6/15/24, 1:47 PM

it also won't work on scroll

Ἔ

ἔρως•6/15/24, 1:47 PM

it will only work on click

Ἔ

ἔρως•6/15/24, 1:50 PM

https://jsfiddle.net/wtjq9fd3/ <-- here's an example

Ἔ

ἔρως•6/15/24, 1:54 PM

if you use sass, it can be made a lot better

MarkBoots•6/15/24, 2:25 PM

i think OP also wants an intersection observer to highlight the corresponsing menu item when scrolling through the sections

Ἔ

ἔρως•6/15/24, 2:26 PM

yes, that would be a much better solution

Ἔ

ἔρως•6/15/24, 2:26 PM

but this specifically states css and html, not js

Ἔ

ἔρως•6/15/24, 2:27 PM

and with css, this might be the best possible

MarkBoots•6/15/24, 2:27 PM

yea, i know. but reading the question i think OP want's that (which isn't possible with css alone)
but i might be wrong

Ἔ

ἔρως•6/15/24, 2:40 PM

as far as i know, it's impossible with css only

Ἔ

ἔρως•6/15/24, 2:40 PM

unless someone made some magic voodoo for that