Signaler

Barre de navigation flottante

Posez votre question fifidibosco 22Messages postés mercredi 2 décembre 2015Date d'inscription 24 septembre 2017 Dernière intervention - Dernière réponse le 5 juil. 2017 à 18:12 par fifidibosco
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

Utile
+0
plus moins
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,
Donnez votre avis
Utile
+0
plus moins
Ça fonctionne super, merci.
Fifi
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !