comportamiento de un boton

fnsrck · #1 (**permalink**) 21/03/2011, 11:47

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!!!

Naahuel · #2 (**permalink**) 21/03/2011, 21:58

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<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  body{
    height:3000px;
    width:3000px;
  }
  #quieto-horizontal{
    position:absolute;
    width:100px;
    height:100px;
    top:40%;
    left:10px;
    background:yellow;
  }
</style>
<script>
  $(function(){
    var contenedor_quieto =  $('#quieto-horizontal');
    var actual_top = contenedor_quieto.offset().top;
    $(window).scroll(function(){
      var scroll_top = $(this).scrollTop();
      var css_top = actual_top + scroll_top;
      contenedor_quieto.stop().animate({top:css_top});
    });  
  });
  </script>
</head>
<body>
  <p id="quieto-horizontal">Estoy quieto pero sólo verticalmente</p>
  
</body>
</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 originalcontenedor_quieto.stop().animate({top:css_top});

por

Código Javascript:

Ver originalcontenedor_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.

fnsrck · #3 (**permalink**) 28/03/2011, 05:55

Esta perfecto. MUCHAS GRACIAS!!!!