HTML

Como hacer un DIV Fijo cuando damos Scroll (jQuery)


En muchas sitios web las personas usan un DIV Fijo “Sticky” para mostrar cierta información importante o Mostrar anuncios de publicidad. En esta entrada vamos a ver como hacerlo en nuestras propias paginas o Blog.

Si es una sitio web creado por ustedes mismos primero debemos incluir la versión 1.7.1 de jQuery y copiamos la siguiente función de jQuery, debería parecer a esto.



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){ // document ready

           if (!!$('.sticky').offset()) { // make sure ".sticky" element exists

         var stickyTop = $('.sticky').offset().top; // returns number 

  $(window).scroll(function(){ // scroll event

  var windowTop = $(window).scrollTop(); // returns number 

  if (stickyTop < windowTop){
     $('.sticky').css({ position: 'fixed', top: 0 });
  } else {
     $('.sticky').css('position','static');
  }

          });

        }

     });
</script>
Nota: 'sticky' es la clase del DIV y es recomendable poner este código al final de la pagina para no comprometer el rendimiento de la pagina.

Para los que lo quieren poner en Blogger solo deben agregar un Gadget (HTML/Javascript) y copiar lo siguiente. 


<div class="sticky">

///// Lo que quieres Fijar

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){ // document ready

   if (!!$('.sticky').offset()) { // make sure ".sticky" element exists

  var stickyTop = $('.sticky').offset().top; // returns number 

  $(window).scroll(function(){ // scroll event

  var windowTop = $(window).scrollTop(); // returns number 

  if (stickyTop < windowTop){
      $('.sticky').css({ position: 'fixed', top: 0 });
  }else {
      $('.sticky').css('position','static');
  }
 });

 }

     });
</script>

  • #
  • #
  • #
  • #

    • Comparte este Post

    Tambien te gustaria esto

    1 comentarios

    1. Unknown28/10/14, 2:37 p.m.

      Excelente aporte. Pude utilizarlo a mi gusto, claro, con unas pequeñas modificaciones nada más.

      Gracias.

      ResponderBorrar