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

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;
}