Menu qui reste fixé à partir d'un certain moment au scrolling

Bonjour!
C'est un effet qui revient beaucoup sur les sites et qui me plait beaucoup, qui est de coller le header ou menu au top de la page. J'ai fais quelques recherches, et ces sites utilisent la fonction position:fixed.
J'aimerai alors appliqué cet effet mais sur une structure de thème plus traditionnel. Je m'explique : Mon thème est composé du header, ensuite du menu puis du corps de la page. Et au moment que mon menubar doit disparaitre naturellement au scrolling, je préférerai qu'il reste fixé. Et à l'inverse, si on effectue un scroll de bas en haut, je voudrais qu'il retrouve sa place naturelle dans le thème. Et dans ce cas position:fixed n'est pas approprié (du moins pas seul) car il fixe le menu directement et non à partir d'un certain niveau de mon scrolling.
J'ai fais quelques recherches mais je n'ai pas trouvé de sujets sur ce cas, bien qu'il est assez répandu, je ne sais pas trop comment définir cet effet.

Voici mon site (dans sa version antérieure mais le principe reste le même) : http://vibzone.fr/

Auriez vous une suggestion à me faire? Si ce n'est pas clair n'hésitez pas à me demander plus de précision. Merci d'avance !

Bonjour.

En fait pour faire ce que tu veux faire, il te faudra quelques lignes en javascript pour fixer (avec un bon vieux position:fixed que tu as cité) ton menu à un certain niveau du scroll.

C'est assez simple à faire en jQuery (vu que tu l'utilise déjà sur ton site)

Bonsoir et merci de la réponse !
En effet, j'ai eu le temps de faire des recherches plus approfondies et j'ai trouvé des situations similaires à la mienne. J'ai vu qu'il fallait utiliser un code de ce genre

var positionElementInPage = $('#top').offset().top;
$(window).scroll(
    function() {
        if ($(window).scrollTop() >= positionElementInPage) {
            // fixed
            $('#top').addClass("floatable");
        } else {
            // relative
            $('#top').removeClass("floatable");
        }
    }
);

#top correspondant à ma navbar. Cependant aucun changements notables. Le fichier est bien appelé dans le footer (je ne sais pas si on dit ça comme ça, c'est pas trop mon truc le JS ^^) mais ça n'a pas d'effet. Est-ce que le code ci-dessus n'est pas approprié?

PS: Je n'effectue pas les tests sur mon site directement mais en local donc il n'y a aucun changement effectué sur l'adresse que j'ai cité dans mon premier post.

Boa non a vue de ne ça à l'air bon. Regardes si ta classe floatable existe bien, est bien appliquée et met bien ton menu en position: fixed; (les outils de dev de ton navigateur peuvent te dire tout ca).

Justement elle n'existe pas il me semble, je n'avais pas vu que ce morceau de code faisait référence à ça. où dois-je la placer?

Ca na pas d'importance tant qu'une fois qu'elle est appliquée à ton menu, il passe en position fixed. Donc relativement n'importe ou dans ton css fera l'affaire.