Foros del Web - Ver Mensaje Individual

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.