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 !

Salut,

Quand tu recherches des effets/scripts etc.. tape tes recherches en anglais. Tu auras beaucoup plus de réponse possible et adapté à tes besoins. Les FR n'aiment pas partager et garde les infos, rechignent à répondre au autre pour les aider.

Bref voici ce que j'ai trouvé :

.fixe_moi {
    position:fixed;
    top:0px;
//and other CSS Properties as you want
}

Ca c'est la classe qui va être ajouté quand on va scroll la page à ton élément #ID

$(document).ready(function() {
    var s = $("#top");
    var pos = s.position();                   
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("fixe_moi ");
        } else {
            s.removeClass("fixe_moi ");
        }
    });
});

En gros ce qui se passe : quand tu vas scroller, une classe va s'ajouter à ton #TOP, cette classe permet de fixer ton élément.

J'utilise cette fonction sur mon portfolio.

Bonjour,

Je recherche le même effet et en voulant l'appliquer à mon <nav> ça ne fonctionne pas Je n'ai que le jquery de base d'inclus comme javascript dans ma page.

[EDIT: autant pour moi, ça marche impec ^^, merci ! ]
Modifié par fraiddo (23 Aug 2013 - 09:38)

Au plaisir