Cambiar propiedades de un elemento al hacer scroll

Supongamos que tienes que hacer el desarrollo de una página web en la que la cabecera tendrá una versión sticky. Para ello has usado la propiedad position: sticky de CSS y el menú se queda fijo en la parte superior mientras haces scroll. Pero tienes un problema y es que el diseño del menú no debe ser exactamente igual cuando empiezas a hacer scroll, el espaciado variará para que el alto de la cabecera ocupe menos.

El caso anterior es bastante recurrente, por fin disponemos de una propiedad para hacer los elementos sticky, pero su integración aún no es muy versátil dadas las limitaciones de CSS. Para solventar la situación debemos recurrir a JavaScript, con el que podremos hacer algunos cálculos que nos permitan conocer la posición en scroll del usuario y así controlar los estilos que se le aplican al elemento. No hay un único modo de implementar esto, pero nosotros vamos a ver cómo hacerlo añadiendo o eliminando clases CSS directamente.

Los primero es crear las dos clases que usaremos: normal para cuando estamos en la posición inicial y sticky para cuando se hace scroll. En ellas puedes definir las propiedades que quieras, pero siguiendo con el ejemplo solo vamos a cambiar el margin.

.normal{
	margin: 30px 0;
}
.sticky{
	margin: 15px 0;
}

Una vez creada las clases, supongamos que la cabecera en total mide unos 100px de alto, la idea sería comprobar si el desplazamiento del scroll es mayor a 100px, es decir, si hemos rebasado el alto de la cabecera y en tal caso eliminaremos la clase actual para añadir a continuación una diferente con las propiedades ajustadas. De este modo el margen variará según la posición en la que estemos. Ahora es el momento de crear nuestro JavaScript para que haga justo lo que he comentado. Podría ser algo así:

$(function() {
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 100) {
            $('.menu').removeClass('normal').addClass('sticky');
        } else if (scroll < 100) {
            $('.menu').removeClass('sticky').addClass('normal');
        }
    });
});

En este ejemplo almacenaremos en una variable la posición del scroll (utilizando la función scrollTop()) y la usaremos después dentro de los condicionales para hacer la magia.  Si la posición del scroll es superior o igual a 100px eliminamos del menú la clase inicial normal y añadimos una específica para la versión sticky del menú a la que he llamado sticky, en un alarde de originalidad. Si en caso contrario la posición es inferior a 100, eliminaremos la clase sticky y restituiremos la inicial normal.