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