Neste código abaixo, eu consigo fazer com que o item clicado mude o background-color
, porém gostaria que mudasse sem clicar, ou seja, quando estivesse passando pela <section>
correspondente.
Sei que a forma de fazer com que mude com um determinada rolagem pelo evento
scrollTop
, porém não quero definir um tamanho fixo de cada rolagem e sim de uma forma que independente do conteúdo e tamanho da<section>
altere obackground-color
do item do menu.
Como fazer?
$('.menu li').click(function(){
$('.menu li').css('background-color', 'green');
$(this).css('background-color', 'white');
})
* { margin: 0; padding: 0; }
.menu { text-align: center; position: fixed; width: 100%; }
.menu ul { list-style: none; display: inline; }
.menu li { display: inline-block; }
.menu a { text-decoration: none; color: #000; padding: 10px; display: inline-block; }
div { height: 300px; }
.blue { background-color: blue; }
.red { background-color: red; }
.orange { background-color: orange; }
.grey { background-color: grey; }
.green { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="menu green">
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#work">WORK</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
<section id="home">
<div class="orange"></div>
<div class="blue"></div>
<div class="grey"></div>
</section>
<section id="work">
<div class="blue"></div>
<div class="orange"></div>
<div class="grey"></div>
<div class="orange"></div>
<div class="grey"></div>
</section>
<section id="contact">
<div class="grey"></div>
<div class="orange"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="orange"></div>
<div class="grey"></div>
</section>