Efecto de bloque fijo con JQuery y CSS

Un efecto muy recurrido en muchas tiendas online, es el generado para que aunque se haga scroll en la página, algunos elementos como el carrito de la compra se mantengan siempre visibles "persiguiendo" al comprador en todo momento.

Un claro ejemplo del uso de este ejemplo es la página de Apple, durante el proceso de compra se observa como el carrito siempre está presenta para el usuario.

Antes del scroll

Durante el scroll

Dos formas de hacer el efecto

Existen dos formas de conseguir este efecto:

1. Con CSS
   La forma de hacerlo con CSS es tan simple como establecer la propiedad position:fixed en el elemento de bloque en cuestión y que éste esté contenido en un div con position:absolute. La ventaja de hacerlo con CSS es que es muy sencillo, las desventajas son vairas, por un lado el efecto queda muy brusco y estático cuando hacemos scroll en la página y por otro sabemos que Internet Explorer 6 no ejecuta el parámetro position:fixed. Ver demo 1
2. Con JQuery
   JQuery permite que el efecto quede suavizado y resulte sutil mientras navegas por la página, además de ser compatible con todos los navegadores. Es un poco más complicado de realizar pero la dificultad es mínima.
   Veamos entonces un ejemplo y cómo se hace... Ver demo 2

Efecto fijo con JQuery, pasos a seguir

1. Creamos el HTML de la página y su correspondiente CSS, cada elemento tendrá asignada su clase para que JQuery pueda manejarlos en base a esas referencias.
   En nuestro caso, esta es nuestra CSS insertada inline dentro de la página HTML:
   

               
                   <style>
                         /* required to avoid jumping */
                         #commentWrapper  {
                           left: 450px;
                           position: absolute;
                           margin-left: 35px;
                           width: 280px;
                         }
   
                         #comment  {
                           position: absolute;
                           top: 0;
                           margin-top: 20px;
                           border-top: 1px solid purple;
                           padding-top: 19px;
                         }
   
                         #comment .fixed {
                           position: fixed;
                           top: 0;
                         }
                   </style>
   
                   <div id="comments">
                           <ol>
                             <li>Aquí van los comentarios de los usuarios...</li>
                             <li>etc...</li>
                           </ol>
                         </div>
   
                         <div id="contenedor-comentarios">
                           <div id="comentario">
                             <form>
                               <!-- take their response -->
                             </form>
                           </div>
                   </div>
   
               
           

2. Insertamos la llamada al código Javascript en la página.
   

               <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
           

3. Capturamos la posición inicial del formulario de comentarios. Existen varias partes hasta asegurarnos que obtenemos un número y que a su vez calculemos en margen superior:
   

               var top = $('#comment').offset().top;
           

4. A continuación sustraemos el margen superior en el siguiente código:
   

               var top = $('#comment').offset().top - $('#comment').css('marginTop');
           

5. Aunque el resultado que obtenemos es del tipo "20px", necesitamos que sea un número para poder operar con él, así pues utilizaremos el método parseFloat:
   

               var top = $('#comment').offset().top - parseFloat($('#comment').css('marginTop'));
           

6. Finalmente si no incluimos un margen en la CSS el resultado de la llamada al método será auto con lo que el cálculo no funcionará, así que necesitaremos reemplazar el texto auto por el número 0:
   

               var top = $('#comment').offset().top - parseFloat($('#comment').css('marginTop').replace(/auto/,0));
           

7. Todo este proceso se debe de realizar una vez la página haya sido cargada, así que utilizaremos el método ready para ello:

               
               $(document).ready(function () {
                   var top = $('#comment').offset().top - parseFloat($('#comment').css('marginTop').replace(/auto/,0));
   
                   $(window).scroll(function () {
                       // let's do something funky
                     });
               })
               
           

8. Para manejar el efecto de scroll necesitamos hacer lo siguiente:
   

   
   $(document).ready(function () {             var top = $('#comment').offset().top - parseFloat($('#comment').css('marginTop').replace(/auto/, 0));             $(window).scroll(function (event) {                 // what the y position of the scroll is                 var y = $(this).scrollTop();                  // whether that's below the form                 if (y >= top) {                     // if so, ad the fixed class                     $('#comment').addClass('fixed');                 } else {                     // otherwise remove it                     $('#comment').removeClass('fixed');                 }             });         }); 

Y así es básicamente como se realiza el efecto de bloque fijo con JQuery.

Espero que os resulte útil alguna vez. Stay tuned!! :)