Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Cómo detectar si se está haciendo scroll en una página y cómo cuantificarlo con jQuery

Imago voragine.net
[actualizado el ]

Detectar si se está haciendo scroll en el navegador y poder cuantificarlo —saber la posición vertical de la página en la ventana del navegador— puede ser muy útil, por ejemplo para crear una barra de navegación que permanezca fija (fixed en CSS) y siempre visible. Valga como ejemplo, la página del proyecto Thinkcommons de Domenico Di Siena, en el que estoy colaborando. Esto lo podemos conseguir con la función .scrollTop() de jQuery, que nos devuelve la altura en píxeles que ha quedado oculta por el borde superior de la ventana del navegador.

La siguiente función de jQuery permite saber cuándo un elemento del DOM está en la parte superior de la ventana del navegador para, en ese momento, cambiarle las propiedades de estilo necesarias y que permanezca siempre visible. Básicamente asocia .scrollTop() al método .scroll():

$(function () {
  var $win = $(window);
  // definir mediente $pos la altura en píxeles desde el borde superior de la ventana del navegador y el elemento
  var $pos = 140;
  $win.scroll(function () {
     if ($win.scrollTop() <= $pos)
       $('.menu').removeClass('fijar');
     else {
       $('.menu').addClass('fijar');
     }
   });
});

Esto lo podemos aplicar a un elemento del DOM con la clase menu:

</pre>
<ul class="menu fijar">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>
<pre>

que cuando se encuentre en la parte superior de la ventana adquirira la clase fijar:

</pre>
<ul class="menu fijar">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>
<pre>

Los estilos CSS que darán propiedades al elemento los podemos definir de la siguiente manera:

.menu {
  position: absolute;
  top: 140px;
}
.fijar {
  position: fixed !important;
  top: 0 !important;
  z-index: 100;
}

8 comentarios

    • Por ra

    Hola, hace tiempo que buscaba este efecto pero no lo encontraba porque no sabía las palabras exactas para encontrarlo.

    Estás seguro que esta funcionando, lo he probado y no me anda, creo que esta faltando algo y no me doy cuenta.

    Alguna ayuda por favor!

    Gracias! :)

  1. Hola ra, a mí me funciona sin problema. Sin más datos no te puedo ayudar: qué has hecho, dónde lo has implementado… Si lo tienes online pásame el enlace del sitio y así lo puedo ver.

    • Por billie

    falta una llave y___y

    1. Gracias por el apunte billie,

      faltaba el cierre de la condicional y parte de la condición en el script JS. Añadido.

    • Por Paulina •

    Pues yo lo probé e hice correcciones y nada de que funciona. Al menos sirve para darse una idea.

    1. ¿Qué es lo que no te funciona, Paulina?

        • Por Paulina •

        Al hacer el scroll los items del menu se salian del contenedor y al regresar el scroll ya no hacia nada. Mejor dejé de intentar ver por donde estab el problema y encontré otra opción con menos código que me funcionó mejor y con pocos ajustes se adaptó a lo que necesitaba. De todas maneras me gustó su post porque me sirvió para darme una idea :D

    • Por rafar

    funciona perfectamente, va de lujo, no se por qué yo lo estaba intentando y no se si fue por el método attr o ni idea, pero me parpadeaba el div al hacer scroll… copiado el tuyo y va perfect. Un saludo y gracias por ayudar a la gente con ideas como esta.

×

Responder al comentario de skotperez

*
*

 

No hay trackbacks