Menu link color changes when the scroll is over its respective section

Navigation
1

Hello, everyone!

What JavaScript code should I insert so that when the user is navigating (scrolling) over a section, the "li a" receives a new class to change the color of the link?

Ideally, the "#inicio" section should receive the class by default and that this code 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
    
asked by anonymous 01.11.2016 / 15:52

2 answers

1

Take a look at the W3schools documentation on Bootstrap ScrollSpy .

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

See: 

<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>

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

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

data-offset="50" says that it should start parsing the scroll from 50px away from the top of the screen.

Then it will set an 'active' class in <li> corresponding to the element it is over.

Example:

With the focus on <div id="inicio"> and <li> of the link referencing the start id will get the active , or <li class="active"><a href="#inicio">Ínicio</a></li> .

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

    
01.11.2016 / 17:00
1

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

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

You can also check the position of the scroll and change via JQuery, but this less elegant and less assertive solution, taking into consideration if you are developing thinking about 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 for JQuery addClass .

A final option, to delimit a wider area to change color, is to cut the elements you want to change color by a div and make it cover a specific area, that is, it occupy a whole line and have a certain size.

    
01.11.2016 / 16:30
Zend Framework - Where are query queries? strcpy () in struct string