How to highlight the current section the user is viewing in javascript?-CodePudding

I am coding a simple navigation bar for a project that has four sections, and I made it interactive enough to have a specific color when hovering/clicking on a section and then it returns back to its original color after clicking. But what if I want the selected section to still be colored/highlighted when a user is viewing it? So if the hovering color is coded blue, i want the section in the Navbar to still be blue when a user has selected it, and then changes when a user selects another section. Here's my code so far.

// The mouse hover functiona and commands. Here we specificy the color of the buttons/mouse
 // when the user clicks on them, there's a color for hovering/clicking
 // and a color for leaving the button

 function mouseOver () {
    let anchor = document.getElementsByTagName('a');

    for (i = 0; i < anchor.length; i  ) {
        anchor[i].addEventListener('mouseover', function handleMouseOver() {
            event.target.style.backgroundColor = "#72a6ca";
            event.target.style.color = "#fff";
        })
        //the color returns to its normal state after clicking away
        anchor[i].addEventListener('mouseout', function handleMouseOut() {
            event.target.style.backgroundColor = "rgb(220, 220, 220)";
            event.target.style.color = "black";
            })
        }
    }

and here is my navbar display code

function navBarStyle () {
    let anchor = document.getElementsByTagName('a');
    let styles = `
        display: flex;
        flex-direction: row;
        align-items: stretch;
        color: #000;
        text-decoration: none;
        margin: 0 0.5em 0 0.5em;
        padding: 0.5em;
        background-color: rgb(220, 220, 220);
        font-size: large;
        transform:translateX(-0.5em);
    `;

    for (i = 0; i < anchor.length; i  ) {
        anchor[i].setAttribute('style', styles);
    } }

if i was vague enough i am sorry, but any help would be appreciated to put me on the right track

CodePudding user response：

Firstly, a note for your current implementation. It works and it is pretty well coded. But for this thing browsers offer native functionality using the :hover selector and it would be better to use than to reinvent it.

I don't have your HTMl but you would most likely need to add a class to each 'a' tag in the nav, something like this:

<nav>
    <a href="link1" >Link 1</a>
    <a href="link2" >Link 2</a>
</nav>

and then you would need a style tag in the head (or better, external css)

<head>
...
<style>
  .nav-link {
    background-color: 72a6ca;
    color: #fff;
  }

  .nav-link:hover {
     background-color: rgb(220, 220, 220);
     color: black;
  }
</style>
</head>

As for the current section, your best bet would be to use https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

See here for an example: Intersection observer API scroll aware navigation

or this codepen: https://codepen.io/mishunov/pen/opeRdL

Using IntersectionObserver you can detect when the user scrolls in/out of the section. You can toggle another class on and off of the related nav-link then. For example - say you toggle the .current class, your style could look like this to style both cases (hovering and currently scrolled) in 1 place:

  .nav-link:hover, 
  .nav-link.current {
     background-color: rgb(220, 220, 220);
     color: black;
  }