Un elemento sube hasta la parte superior del navegador y queda fijo

Buenas tardes a tod@s

Alguien me podría remitir a algún tutorial donde se explique cómo hacer que un elemento que en principio no aparece en la parte superior del navegador, suba cuando hacemos scroll pero sólo hasta que alcanza el límite superior de la ventana de dicho navegador?

Para ilustrar mi pregunta os dejo este link:

http://www.routalempi.fi/

En él podemos ver como el menú se comporta de la manera que os digo.

No pido una explicación directa o un trozo de código porque supongo que será más complicado que eso, pero si me indicárais algún tutorial donde pueda aprender a hacerlo, sería genial.

Muchísimas gracias por adelantado!

Verán, para que no piensen que parto de cero, sé que al principio la posición del menú es absolute, y justo cuando al hacer scroll, este menú alcanza la parte superior del navegador, dicha posición cambia a fixed. Lo que no sé es cómo hacer que cambie...

Es bastante sencillo con JQuery... Técnicamente lo que quieres hacer se llama "toolbar".
Suponiendo que tienes un elemento block (tal como un <div>) cuyo id es "mitoolbar":

Código Javascript :

$(function(){
  var $el = $('#mitoobar'), // La toolbar
      originalTop = $el.offset().top;  // Posición top original

  $(window).scroll(function(e){ // Evento scroll de la ventana
    if ($(this).scrollTop() > originalTop ){ // cuando la posición de scroll de la ventana es mayor que la posición top de la toolbar...
      $el.css({'position': 'fixed', 'top': '0px'}); // ponerla en fixed.
    } else { 
      $el.css({'position': 'absolute', 'top': originalTop});  // sino, ponerla en absolute.
    } 
  }); // scroll
});

Mil gracias DriverOp, funciona perfecto y está muy bien explicado!!!

Oie Driver OP te rifaste en el codigo.. ¿pudo utilizarlo para un tuto mi hermano?

Mi pregunta en el codigo es por que tu variable la declaras como signo de pesos ?

"$el" en ves de "el" ??

el signo pesos es un caracter más, yo también suelo utilizarlo para las variables por simple costumbre

elporfirio: Por supuesto, puedes hacer con ese código lo que quieras. El problema es tan común y la solución tan sencilla (según mi parecer) que estoy seguro que más de uno habrá llegado a la misma conclusión, así que ni siquiera me atrevo a reclamar la autoría

El signo $ es para recordar(me) que se trata de un objeto JQuery en vez de un objeto simple de JS. Y como dice HtrMancera, es una costumbre.