Modificar CSS según la altura del scroll

Todos hemos visto en alguna página web que el header, la barra de navegación o algún elemento del site cambia de apariencia (estilos) a medida que hacemos scroll.

Os dejo un pequeño trozo de código con el que podéis conseguir esto con Jquery:

 

Código HTML:

<nav class="nav large"></nav>
<section class="section"></section>

Codigo CSS:

.nav {
  width: 100%;
  position: fixed;
  z-index: 99;
  transition: all 0.6s ease;
  background-color: red;
}

.large {
  height: 40px; /* Altura inicial del div */
}

.small {
  height: 20px; /* Altura final cuando el recorrido del scroll supere 10 píxeles */
}

.section {
  width: 100%;
  height: 1000px;
  background-color: grey;
  position: relative;
{

Codigo Javascrit (antes de </body>):

<!-- Librería Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type="text/javascript">
   $(document).on("scroll",function(){
   if($(document).scrollTop() > 10){ // El número indica, en píxeles, a qué altura se ejecutará el código y cambiarán los estilos.
      $("#nav").removeClass("large").addClass("small");
   } 
   else{
      $("#nav").removeClass("small").addClass("large");
   }
   });
</script>
DESCARGAR      DEMO

¿Hablamos?

ir arriba