Barre de navigation flottante

Fermé
fifidibosco Messages postés 72 Date d'inscription mercredi 2 décembre 2015 Statut Membre Dernière intervention 17 juillet 2023 - 4 juil. 2017 à 20:20
fifidibosco Messages postés 72 Date d'inscription mercredi 2 décembre 2015 Statut Membre Dernière intervention 17 juillet 2023 - 5 juil. 2017 à 18:12
Bonjour,

j'utilise un script (merci Scoco http://www.scoco.fr/fixer-barre-navigation-scroll/#comment-56390)
qui permet de fixer la barre de menu flottante en haut de la page lorsqu'on scrolle vers le bas.
Script simple qui fonctionne très bien. J'aimerais, en plus, que la barre de navigation soit en bas de l'écran à l'ouverture de la page, quelle que soit la taille de l'écran, et qu'elle y retourne lorsqu'on revient en haut de la page.

html/head
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

<script type="text/javascript">
 $(function(){
 // On recupere la position du bloc par rapport au haut du site
 var position_top_raccourci = $("#navigation").offset().top;
 
 //Au scroll dans la fenetre on déclenche la fonction
 $(window).scroll(function () {
 
 //si on a defile de plus de 150px du haut vers le bas
 if ($(this).scrollTop() > position_top_raccourci) {
 
 //on ajoute la classe "fixNavigation" a <div id="navigation">
 $('#navigation').addClass("fixNavigation"); 
 } else {
 
 //sinon on retire la classe "fixNavigation" a <div id="navigation">
 $('#navigation').removeClass("fixNavigation");
 }
 });
 });
 </script>


html/body
<div id='navigation'>
 Lien1 - Lien2 - Lien3
 </div>


css
navigation{
 background: #777777;
 background-image:URL("bgfooter.jpg");
 height: 80px;
 width: 100%;
 }

.fixNavigation{
 z-index: 9999;
 height:50px;
 position: fixed;
 top: 0;
 /* Mise en forme */
 width: 900px; /* <-- Largeur de votre site */
 }


par avance merci
fifi

2 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
5 juil. 2017 à 11:14
Salut,

Une solution possible de positionner par défaut la barre de navigation en absolute avec un bottom: 0; pour l'afficher en bas la page.
Un élément en absolute se positionne par rapport au premier parent en position relative, on peut donc créer un div englobant la barre de navigation avec un height: 100vh; pour que celui-ci fasse la hauteur de l'écran.
Enfin il faut ajouter un !important sur le position: fixed; de la classe .fixNavigation pour que cette règle surcharge celle définit dans #navigation (ou utiliser une classe à la place d'un id, voir poids des sélecteurs css).

https://jsfiddle.net/73kb2ot0/

Bonne journée,
0
fifidibosco Messages postés 72 Date d'inscription mercredi 2 décembre 2015 Statut Membre Dernière intervention 17 juillet 2023
5 juil. 2017 à 18:12
Ça fonctionne super, merci.
Fifi
0