Todas las mentes viagra generico espana del mundo cialis generico espana recomiendan viagra contrareembolso prevenir problemas cialis contrareembolso

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" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<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.

Categorías: JavaScript, jQuery
Etiquetas:,
Si necesitas una url corta puede usar: codygo.es/526

6 comentarios

  1. Genial!, lo probaré en mi Web. Gracias.

  2. sebastian dice:

    Hola amigo necesito ayuda en algo, no lo he podido encontrar en ningun lado. necsito que un div se quede fijo al hacer scroll, asi como aqui http://theproc.es/page/demo/demo-efecto-elemento-fijo-flotante-con-jquery?layout=false , pero lo necesito asi:

    el div que se debe quedar fijo está dentro de otro que lo contiene, y este div contenedor es quien tine el scroll.

    agradeceria tu ayuda, saludos

  3. Miguel Ángel dice:

    Genial, amigo.

    Es justo lo que estaba buscando y me funciona.

    Sólo un apunte: deberías poner que hace falta enlazar el script a jquery. No sé mucho de programación y hasta que no se me ha ocurrido me he vuelto un poco loco.

    Pero funciona perfectamente.

    Mil gracias!!!

  4. Jorge Mario dice:

    Por fin un código que me funciona para esto!

Deja un comentario