Recientemente se ha puesto de moda los elementos de una web que se transforman a través del scroll. Eso quiere decir que cuando haces scroll hay ciertos elementos, como el menú o el logo que se vuelven pequeños se recolocan para ofrecer una experiencia web mucho más agradable. Algunos ejemplo de este tipo de transformaciones podrían ser estos:

  • Ologame: el menú al hacer scroll de vuelve fixed para que el usuario pueda navagar a través d ela página.
  • Vasava: la barra de la parte superior se minimiza así cómo el logo.
  • Inzeit – Mobile Reatail: cuando bajas aparace un menu de la parte de arriba.

Esto se puede hacer de la siguiente forma (teniendo en cuenta que hay muchas más formas de hacerlo):

<script type="text/javascript">
     window.onscroll = scroll; //cuando hacemos scroll llamamos a la función
     function scroll(){
           //coge el valor del scroll en pixeles
           var sc = window.pageYOffset;
           //registramos el valor scroll en la consola por si tenemos que hacer ajustes, saber dónde
           console.log('window.pageYOffset = '+sc);
           if(sc > 100){ //si racemes scroll más de 100 pixeles
                //si el header no tiene la clase fixed:
                if(!$('#header').hasClass('fixed')){ 
                     $('#header').addClass('fixed'); // le ponemos fixed
                }			
           }else if($('#header').hasClass('fixed') || sc < 100){
                $('#header').removeClass('fixed'); // se lo sacamos
           }
     }
</script>

En el caso anterior sólo hemos añadido una clase fixed que lo que hace es que el menú se quede fijo al bajar pero ponemos jugar con el propio valor del scroll:

<script type="text/javascript">
     window.onscroll = scroll; //cuando hacemos scroll llamamos a la función
     function scroll(){
           //coge el valor del scroll en pixeles
           var sc = window.pageYOffset; 
           //registramos el valor scroll en la consola por si tenemos que hacer ajustes, saber dónde
           console.log('window.pageYOffset = '+sc); 
           if(sc < 90 && sc > 0){
                var num = 200-(3/2)*sc;
                //hace que nuestro logo se vuelva pequeño
                $('#header h1 img').css({'width': num, 'height': num}); 
           }else if(sc <= 0){
                //hace que nuestro logo vuelva a sus medidas originales
                $('#header h1 img').css({'width': auto, 'height': auto}); 
           }else{
                //hace que nuestro logo tenga las medidas máximas
                $('#header h1 img').css({'width': 65, 'height': 65}); 
           }
     }
</script>

Además si hacemos el scroll medianamente lento el log hace una animación al empequeñecerse.

Por cierto tened en cuenta que estoy usando jQuery para desarrollar todo este código, siquisiésemos hacerlo en mootools u otra librería javascript el código puede variar un poco.