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
    el 6 feb. 2018 a las 12:33

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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