.height()
te regresa el alto del contenido del elemento, en este caso no te sirve para saber en que posición se encuentra, para eso podemos utilizar .offset()
, tampoco hay necesidad de declarar dos manejadores de scroll
, puedes hacerlo todo dentro de uno, que según este post de John Resig (el creador de jQuery) tampoco es recomendable.
¿Entonces que podemos hacer?
Como dice en ese post podemos crear un timer que se ejecutará cada cierto tiempo y solo tomará acción si el usuario ha hecho scroll, y cuando la posición del div
esté donde deseamos asignamos el color al item.
En este ejemplo aplico todo eso, el navbarHeight
lo utilizo para que cambie de color justo cuando esté pasando por el borde de la barra de navegación.
var navbarHeight = 20;
var didScroll = false;
$(window).scroll(function() {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
didScroll = false;
// Check your page position and then
// Load in more results
var top = $(window).scrollTop() + navbarHeight;
if ($('.studio').offset().top < top) {
$('li').removeClass('colorsito');
$('#studio').addClass('colorsito');
}
if ($('.portfolio').offset().top < top) {
$('li').removeClass('colorsito');
$('#portfolio').addClass('colorsito');
}
if ($('.contacto').offset().top < top) {
$('li').removeClass('colorsito');
$('#contacto').addClass('colorsito');
}
if ($('.equipo').offset().top < top) {
$('li').removeClass('colorsito');
$('#equipo').addClass('colorsito');
}
}
}, 100);
body {
margin: 0;
padding: 0;
}
nav {
position: fixed;
width: 100%;
}
ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
list-style: none;
}
li {
width: 25%;
text-align: center;
padding: 10px 0;
background-color: #FFF;
transition: background-color 0.5s ease-out;
}
.hint {
position: fixed;
padding: 5px;
color: #FFF;
right: 15px;
bottom: 15px;
background-color: red;
}
.tall {
height: 100vh;
}
.colorsito {
background-color: #a357b3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li id="studio" class="colorsito">
Studio
</li>
<li id="portfolio">
Portfolio
</li>
<li id="contacto">
Contacto
</li>
<li id="equipo">
Equipo
</li>
</ul>
</nav>
<div class="hint">Haz scroll :)</div>
<div class="studio tall" style="background-color: #000;"></div>
<div class="portfolio tall"></div>
<div class="contacto tall" style="background-color: #000;"></div>
<div class="equipo tall"></div>