[Résolu] Partie basse de la barre de navigation toujours fixe

Bonjour,

j'ai une barre de navigation sur mon site divisée en deux partie
______________________________________
Le nom du site
______________________________________
Login / Sign up
______________________________________



Je souhaite que la deuxieme partie "Login/signup" reste toujours visible mais qu'elle se mette tout en haut lors du défilement de la page.
Je connais position:fixed mais bien évidemment la barre reste vraiment fixe et est donc à la même place avec le "trou" de le premiere barre.

J'espère avoir été clair.

Merci beaucoup !

Moi je pense que tu peux faire cela en Javascript :
Il faut que tu écoute l'évenement "onscroll" de ta page, et si le scroll est supérieur à la position de ton menu - son offset - tu l'affiche en "position: fixed", avec dans ton cas "top: 0px", sinon tu l'affiche normalement dans le flux.
Petit conseil : lorsque tu met ton élément en "position: fixed" il sort du flux et il est possible que le reste de ta page change un peu, qu'elle remonte par exemple, donc il faudra peut être aussi ajouter des "margin" à tes autres éléments, cela dépend de la façon dont tu as conçu ton site.

Edit : Pour récupérer le scroll sous Chrome :

document.body.scrollTop

Et sous Firefox :

document.documentElement.scrollTop

Modifié par Prince-Leto (11 Mar 2012 - 23:26)

En fait il te suffit de surveiller l’évènement "onscroll" de window :

window.addEventListener("scroll", getScrollPosition, false);

Et ta fonction elle ne doit pas renvoyer quelque chose mais modifier le style de ton menu.
Je pars du principe que ta barre de navigation possède un id="Barre" :

function getScrollPosition()
{
/* Je t'expliquerais après ce qu'est la variable Position, c'est le offsetTop de ton élément mais il y a une subtilité. */
    if(document.documentElement.scrollTop > Position || document.body.scrollTop > Position)
    {
        document.getElementById("Barre").style.position = "fixed";
        document.getElementById("Barre").style.top = "0px";
    }
    else
    {
        // Sinon on le remet à son état initial, que ce soit relative ou autre.
        document.getElementById("Barre").style.position = "relative";
    }
}

Ce code est adaptable, par exemple on peut récupérer l'élément avant et ne pas avoir à le rappeler à chaque fois avec document.getElementById("Barre"). Autre chose, si tu remet ta barre en relatif tu peux mettre directement dans ta feuille de style "top: 0px". Tu n'auras pas à le remettre à chaque fois sachant qu'on ne l'enlève pas après coup. Il est utile si ta barre est placée en absolu et que tu la fixe avec un "top: quelque chose".

Viens le moment de la subtilité de Position :
C'est l'offset initial de ta barre de navigation, mais il va changer au cours du temps, tu ne peux donc pas mettre "Position = document.getElementById("Barre").offsetTop;", puisqu'à un moment tu le défini comme valant zéro.
Pour moi la meilleure solution c'est d'appeler ton "addEventListener" du départ dans "window.onload", et d'ajouter une variable Position qui récupère la valeur de ton "offsetTop" de ton élément au chargement de la page.
Ton "addEventListener" auras accès à la variable Position si comme moi tu définis non pas ta fonction getScrollPosition ailleurs mais dans ton addEventListener en la laissant anonyme. Ce qui donne le code suivant :

window.onload = function()
{
    var Position = document.getElementById("Barre").offsetTop;
    window.addEventListener("scroll", function()
    {
        if(document.documentElement.scrollTop > Position || document.body.scrollTop > Position)
        {
            document.getElementById("Barre").style.position = "fixed";
            document.getElementById("Barre").style.top = "0px";
            /* Attention la structure de ta page peut être modifiée, si tu as besoin de changer des margins des éléments alentour c'est ici qu'il faut le faire.*/
        }
        else
        {
            document.getElementById("Barre").style.position = "relative";
            // Penser à remettre les autres éléments comme avant si besoin.
        }
    }, false);
}

Modifié par Prince-Leto (12 Mar 2012 - 22:00)