Capa o sección flotante fija en la parte superior con jQuery

En algunas páginas web cuando nos dirigimos a la parte inferior o al pie de la página podemos observar cómo se mantiene la cabecera o alguna capa o sección en la parte superior haciendo un efecto flotante sobre el contenido de la web. Veamos cómo podemos conseguir este efecto con un sencillo script en jQuery

En esta misma página podéis ver el resultado del script, ya que lo hemos utilizado para poner la cabecera flotante y fija en la parte superior de la página. Esta es la parte superior de nuestro sitio web:

Si hacemos scroll y bajamos un poco hacia el pie de página para leer el contenido, podemos observar cómo se mantiene en la parte superior la cabecera de la web que es la sección que hemos decidido dejar fija flotando sobre el contenido.

Veamos el script:

<script type="text/javascript">
  $(document).ready(function() {
    //element será la sección o capa que queremos en la parte superior de la página
    var element = $('.banner');
    //almacenamos en start la posicion inicial de la sección o capa
    var start = $(element).offset().top;
    //Usamos el evento scroll
    $(window).scroll(function() {
      //Cada movimiento de scroll obtenemos la posición vertical superior de la página
      var vertical_position = $(window).scrollTop();
      //Dependiendo si vertical_position es superior a start aplicamos un estilo u otro
      $(element).css('position',((vertical_position)>start) ? 'fixed' : 'static');
      $(element).css('top',((vertical_position)>start) ? '0px' : '');		
    });
  });
script>

Esperamos que os haya servido de ayuda, no dudéis en comentar.

Última modificación: oct 17, 2024