Menu link color changes when scroll is over its respective section

Asked

Viewed 406 times

1

Hello, everybody!

Which Javascript code should I insert so that when the user is browsing (scrolling) over some section the "li a" receives a new class so that the color of the link is changed?

Ideally, the "#start" section will receive the class by default and this code will work for both menus (#menu-mobile and #menu-desktop). 

#menu-mobile li a, #menu-desktop li a {
  color: #666666;
  }
<header>

  <ul id="menu-mobile">
    <li><a href="#inicio" class="scroll inicio">página inicial</a>
    </li>
    <li><a href="#atuacao" class="scroll atuacao">área de atuação</a>
    </li>
    <li><a href="#portfolio" class="scroll portfolio">nosso portfolio</a>
    </li>
    <li><a href="#contato" class="scroll contato">entre em contato</a>
    </li>
  </ul>

  <ul id="menu-desktop">
    <li><a href="#inicio" class="scroll">página inicial</a>
    </li>
    <li><a href="#atuacao" class="scroll">área de atuação</a>
    </li>
    <li><a href="#portfolio" class="scroll">nosso portfolio</a>
    </li>
    <li><a href="#contato" class="scroll">entre em contato</a>
    </li>
  </ul>

  </header

javascript jquery

  • you want when the user hovers over the link it changes color?

  • No, @Giovane. I would like when he is browsing and reading something from the #contact section (for example), the "Contact" link from the menu, to have another color.

  • Got it, you’re looking for a component called Scrollspy

  • Exactly! But since I haven’t learned js yet, I’m hitting myself to apply this code.

  • Hello. I removed the tag and the mention of UX, because your question is independent of that. It may even improve (or not) the UX, but the question remains useful in general scope. :)

2 answers

1

I believe the most assertive way for you to do this is by using the selector :have css. Something like this:

#menu-mobile:houver{
    background-colo: white;
    color: red;
}

You can also check the scroll position and change via Jquery, but this solution less elegant and less assertive, taking into account if you are developing thinking responsive design:

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    if ( scroll == 100 ) // 100 é valor simbolico da posicao do scroll com relacao ao topo
        $("#menu-mobile").addClass("alteraCor");
});

This is the documentation of addClass jquery.

One last option, to delimit a more comprehensive area to change color, is to weave the elements you want to change color by one div and make it cover a specific area, I mean, it occupy a whole line and possess a certain size.

  • No man, that’s an ugly gambis. The best solution is to use a Scrollspy

1


Take a look at the documentation of W3schools about Bootstrap Scrollspy.

You will basically import the required jquery and bootstrap scripts and set a style for the focus through the class active that the bootstrap Spy scroll inserts into the element.

Behold:

<body data-spy="scroll" data-target="#menu-desktop" data-offset="50">
  <header>
    <ul id="menu-desktop">
      <li><a href="#inicio" class="scroll">página inicial</a></li>
      <li><a href="#atuacao" class="scroll">área de atuação</a></li>
      <li><a href="#portfolio" class="scroll">nosso portfolio</a></li>
      <li><a href="#contato" class="scroll">entre em contato</a></li>
    </ul>
  </header>

  <div id="inicio"></div>
  <div id="atuacao"></div>
  <div id="portfolio"></div>
  <div id="contato"></div>
</body>

Putting data-spy="scroll" of the body tag will activate the scrollspy.

The data-target="#menu-desktop" says scrollspy references the element with id menu-desktop.

The data-offset="50" says he should start analyzing the scroll from 50px away from the top of the screen.

Then it will set a 'active' class in the <li> corresponding to the element above it.

Example:

With the focus on <div id="inicio"> the <li> link referencing the id start will receive the active, that is to say <li class="active"><a href="#inicio">Ínicio</a></li>.

Just set a highlight style when the class active is assigned to the focus element.

  • Thank you, @Giovane !

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.