Foros del Web » Creando para Internet » CSS »

comportamiento de un boton

Estas en el tema de comportamiento de un boton en el foro de CSS en Foros del Web. Hola! soy nuevo por este foro, y aqui va mi primera pregunta... quiero que un boton de un formulario este fijo en cuanto al movimiento ...
  #1 (permalink)  
Antiguo 21/03/2011, 12:47
 
Fecha de Ingreso: marzo-2011
Mensajes: 2
Antigüedad: 6 años, 8 meses
Puntos: 0
Pregunta comportamiento de un boton

Hola! soy nuevo por este foro, y aqui va mi primera pregunta...

quiero que un boton de un formulario este fijo en cuanto al movimiento vertical, pero que se mueva con el scroll horizontal. El problema es que con position:fixed; me fija ambos movimientos, y quiero fijar tan solo el movimiento vertical.

Un saludo y gracias de antemano!!!
  #2 (permalink)  
Antiguo 21/03/2011, 22:58
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 meses
Puntos: 192
Respuesta: comportamiento de un boton

La verdad me dió mucha curiosidad y lo intenté resolver.
No logré resolverlo sólo con CSS (seguramente hay modo, pero yo no dejaba de pensar que estaría bueno hacerlo con jQuery).

Te dejo un ejemplo que hice con jQuery:
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  3. <meta charset=utf-8 />
  4. <title>JS Bin</title>
  5. <!--[if IE]>
  6.  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  7. <![endif]-->
  8.   article, aside, figure, footer, header, hgroup,
  9.   menu, nav, section { display: block; }
  10.   body{
  11.     height:3000px;
  12.     width:3000px;
  13.   }
  14.   #quieto-horizontal{
  15.     position:absolute;
  16.     width:100px;
  17.     height:100px;
  18.     top:40%;
  19.     left:10px;
  20.     background:yellow;
  21.   }
  22.   $(function(){
  23.     var contenedor_quieto =  $('#quieto-horizontal');
  24.     var actual_top = contenedor_quieto.offset().top;
  25.     $(window).scroll(function(){
  26.       var scroll_top = $(this).scrollTop();
  27.       var css_top = actual_top + scroll_top;
  28.       contenedor_quieto.stop().animate({top:css_top});
  29.     });  
  30.   });
  31.   </script>
  32. </head>
  33.   <p id="quieto-horizontal">Estoy quieto pero sólo verticalmente</p>
  34.  
  35. </body>
  36. </html>

Acá podés verlo en funcionamiento:
http://jsbin.com/oyuji5

Le agregué una animación al desplazamiento porque me pareció un lindo toque. Para quitársela tenés que reemplazar:
Código Javascript:
Ver original
  1. contenedor_quieto.stop().animate({top:css_top});
por
Código Javascript:
Ver original
  1. contenedor_quieto.css({top:css_top});


Prestá especial atención al CSS. Observá que el conenedor necesita tener position:absolute pero no debe estar incluido en un contenedor con position:relative (De forma que sea el body). Necesitás especificar las coordenadas con left y top, de forma que el script obtenga bien los valores que necesita.

Última edición por Naahuel; 21/03/2011 a las 23:04
  #3 (permalink)  
Antiguo 28/03/2011, 06:55
 
Fecha de Ingreso: marzo-2011
Mensajes: 2
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: comportamiento de un boton

Esta perfecto. MUCHAS GRACIAS!!!!

Etiquetas: comportamiento, fijar, moviemiento, vertical
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:17.