CSS - Menu restant en haut de la page

[Résolu/Fermé]
Signaler
Messages postés
189
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
28 novembre 2019
-
Messages postés
189
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
28 novembre 2019
-
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

Messages postés
189
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
28 novembre 2019
19
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
189
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
28 novembre 2019
19
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
Messages postés
53
Date d'inscription
mercredi 24 avril 2013
Statut
Membre
Dernière intervention
25 avril 2013
10
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.