Front.id

Vamos a echar un vistazo a Waypoints, una librería que nos permite de forma sencilla crear efectos al hacer scroll y llegar a determinado punto de la página. 
Como en su propio sitio web nos indica:

Waypoints is the easiest way to trigger a function when you scroll to an element.

Ejemplo

Veamos este caso, en que tenemos nuestra cabecera y queremos que cuando nos desplacemos hacia abajo se posicione de forma fija a la parte superior a la vez que algunos elementos cambian de tamaño y otros dejan de verse. Por otro lado, cuando el scroll sea hacia arriba queremos que recupere su aspecto inicial.

Para ello vamos establecer el body como punto de referencia e indicar que cuando nos desplacemos 80 pixeles hacia abajo se agregue el class fixed y que cuando nuestro scroll sea hacia arriba y superemos esos 80 pixeles se quite el class.

Para esto, basta con establecer un element y un handler. El element le dice a Waypoints qué posición del elemento DOM debe observar durante el desplazamiento, y el handler es la función que se activará cuando la parte superior de ese elemento llegue a la parte superior de la ventana de visualización.

new Waypoint({
  element: document.querySelector("body"),
  handler: function () {
    console.log('foo');
  },
});

En este ejemplo la función se activara tanto al hacer scroll hacia abajo como hacia arriba pero en nuestro caso necesitamos hacer algo distinto dependiendo de que el scroll tenga una dirección u otra.

Direction

Para esto le podemos pasar a la función el parámetro direction.

new Waypoint({
  element: document.querySelector("body"),
  handler: function (direction) {

    if (direction === 'down') {
      // Hacer una cosa
    } else {
      // Hacer otra cosa
    }

  },
});

Por defecto, Waypoint se activa cuando la parte superior del elemento toca la parte superior de la ventana pero podemos establecer una distancia (incluso con valores negativos) para establecer el punto de activación.

Offset

new Waypoint({
  element: document.querySelector("body"),
  handler: function (direction) {

    if (direction === 'down') {
      // Hacer una cosa
    } else {
      // Hacer otra cosa
    }

  },
  offset: -10
});

 Los valores que acepta este parámetro son:

* Numérico (cantidad de pixeles) ej.: offset: 25

* Porcentaje ej.: offset: '50%'

* Función (Una función que debe devolver un número de píxeles. La función se evalúa de nuevo cada vez que se recalcula un punto de evento, lo que permite modificar la disposición).

* bottom-in-view (activará el handler cuando la parte inferior del elemento golpee la parte inferior de la ventana de visualización) ej.: offset: 'bottom-in-view'

* right-in-view (activará el handler cuando la derecha del elemento golpee la derecha del viewport. Esto sólo es útil en combinación con la opción horizontal) ej.: offset: 'bottom-in-view'

Conclusión

Para nuestro caso de ejemplo, con lo visto ya podemos afrontarlo, pero los invito a leer la documentación de la API que nos brinda la posibilidad de lograr efectos  mas complejos acordes a nuestras necesidades.

Aquí podemos ver a modo de ejemplo, una implementación de lo que hemos visto en este articulo.

See the Pen Waypoints by Front.id (@frontid) on CodePen.