Barre de navigation flottante

fifidibosco 36 Messages postés mercredi 2 décembre 2015Date d'inscription 21 novembre 2017 Dernière intervention - 4 juil. 2017 à 20:20 - Dernière réponse : fifidibosco 36 Messages postés mercredi 2 décembre 2015Date d'inscription 21 novembre 2017 Dernière intervention
- 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

Afficher la suite 

2 réponses

Répondre au sujet
Pitet 2366 Messages postés lundi 11 février 2013Date d'inscription 13 décembre 2017 Dernière intervention - 5 juil. 2017 à 11:14
0
Utile
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,
Commenter la réponse de Pitet
fifidibosco 36 Messages postés mercredi 2 décembre 2015Date d'inscription 21 novembre 2017 Dernière intervention - 5 juil. 2017 à 18:12
0
Utile
Ça fonctionne super, merci.
Fifi
Commenter la réponse de fifidibosco