CSS - Menu restant en haut de la page

Résolu/Fermé
jemsss Messages postés 189 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 28 novembre 2019 - 24 avril 2013 à 16:00
jemsss Messages postés 189 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 28 novembre 2019 - 7 mai 2013 à 13:57
Bonjour,

Je voudrais savoir comment faire pour que mon menu, situé à 100px du haut de ma page, reste visible tout en haut de la page (à 0px) quand on fait descendre ascenseur. Est-ce possible de faire cela uniquement avec du css ?
Voici un exemple : https://www.sabbathschoolpersonalministries.org/
Merci d'avance

Jemsss

3 réponses

jemsss Messages postés 189 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 28 novembre 2019 20
Modifié par jemsss le 7/05/2013 à 14:03
Voici une solution qui a l'air de marcher sur la plupart des navigateurs :

HTML :
<div id="menu_principal" class="menu_principal1">  
    <!--- Le Menu -->  
</div>


CSS :
.menu_principal1 {  
    position: absolute;  
    top: 100px;  
    left:0;  
    height: 25px;  
    width: 100%;  
}  
.menu_principal2 {  
    position: fixed;  
    top: 0;  
    left:0;  
    height: 25px;  
    width: 100%;  
}


Javascrpit
function ChangeClassMenu()  
{  
    var scrollY;  
    if (document.all)  
    {  
        if (!document.documentElement.scrollTop)  
            scrollY = document.body.scrollTop;  
        else  
            scrollY = document.documentElement.scrollTop;  
    }  
    else
        scrollY = window.pageYOffset;  
    if(scrollY > 100)
        document.getElementById("menu_principal").className = "menu_principal2";  
    else
        document.getElementById("menu_principal").className = "menu_principal1";  
}  
window.onscroll = ChangeClassMenu;
2
jemsss Messages postés 189 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 28 novembre 2019 20
2 mai 2013 à 20:52
Bonjour,
Avec un peu de retard mais merci beaucoup pour ton aide.
Je ne suis pas très fort en javascript. Comment connaitre le moment où le haut de la fenêtre est à 100px du haut du body ?
Merci d'avance
1
Cykatra Messages postés 53 Date d'inscription mercredi 24 avril 2013 Statut Membre Dernière intervention 25 avril 2013 10
24 avril 2013 à 16:06
Bonjour,

Il va falloir jouer avec le CSS et le javascript. Il te faudra utiliser la propriété CSS position:fixed; lorsque tu auras atteint un endroit de la page.
Je te conseille quelque chose : Tu fais deux classes CSS; Une pour le menu normal, et une autre pour le menu fixe. Tu n'auras qu'à changer la classe dans ton script au moment voulu.
0