Menu

Barre de navigation flottante [Fermé]

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

Pitet 2378 Messages postés lundi 11 février 2013Date d'inscription 2 février 2018 Dernière intervention - 5 juil. 2017 à 11:14
0
Merci
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,
fifidibosco 47 Messages postés mercredi 2 décembre 2015Date d'inscription 4 juillet 2018 Dernière intervention - 5 juil. 2017 à 18:12
0
Merci
Ça fonctionne super, merci.
Fifi