1

estoy intentanto que los elementos de una lista que estan en un nav cambien su color en función de la parte de scroll que estén, lo he conseguido con el primero, pero luego no soy capaz de remover la clase que le añado con JS, el problema esta en el condicional que hago, que no sé como decirle que si es menor de altura que el siguiente elemento que voy a usar remueva la clase.

El código hasta ahora:

  var studio = $('#studio').height();
  var portfolio = $('#portfolio').height();
  var contacto = $('#contacto').height();
  var equipo = $('#equipo').height();

  $(window).scroll( function () {
    if( $(document).scrollTop() > studio ){
    $('#bgTop1').addClass('colorcito');
    } else {
    $('#bgTop1').removeClass('colorcito');
    }
  });

  $(window).scroll( function () {
    if( $(document).scrollTop() > portfolio ){
    $('#bgTop2').addClass('colorcito');
    } else {
    $('#bgTop2').removeClass('colorcito');
    }
  });

Como es lógicos los elementos de el HTML están en orden y con su id y todos tienen su altura.

1

1 respuesta 1

1

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

1
  • Gracias, esto resuelve el problema .
    – Juan
    Commented el 6 feb. 2018 a las 12:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.