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ú principal 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...

espero no te lleves una gran sorpresa pero eso se hace con javascript, seguramente con jquery, vas a tener que investigar algo mas que position absolute y fixed, para hacer eso, el objeto html, toma de referencia el offset top, que es la altura desde el marco de la ventana hasta el objeto, entonces cuando esta es igual osea 0 el objeto pasa a ser fixed y sigue a la pantalla, y despues a la inversa un proceso similar, saludos.

$(window).scroll(function(){
if($(window).scrollTop() > 563) {
$('#navigation').css('top', '0px');
$('#navigation').css('position', 'fixed');
}
else {
$('#navigation').css('position', 'absolute');
$('#navigation').css('top', '563px');
}
if($(window).scrollTop() > 620) {
$('#navigation').addClass('hovering');
} else {
$('#navigation').removeClass('hovering');
}
});

fijate si le encontras utilidad a esto saludos.

Muchísimas gracias skaterseba, he creado un js con este código, lo he vinculado y funciona perfectamente!!!

Sólo una curiosidad que me gustaría preguntarte: los '563px' son la posición inicial del navigation en el eje y, pero... ¿a qué hace referencia la cifra 620?

Gracias de nuevo!!!!

em, si usaste esas cifras y te funco, habra sido casualidad, xq depende de la pantalla, de cada monitor, y el 620, es la condicion que tiene q cumplir la propiedad scrolltop de la ventana para agregarle la clase q propone el codigo, fijate que es la propiedad scrolltop o que valor devuelve, en la pagina de jquery, y despues vas a entender xq hace eso, saludos.

Gracias skaterseba, había pensado que podía ser eso, pero al hacer la ventana del navegador más pequeña que 620, seguía (y sigue) funcionando :- )

En cualquier caso resolviste mi duda y me diste un gran punto de partida. Mil gracias!