Avoir la barre de navigation flottante au dessus de la toolbar

par Invité Mar 13 Oct 2015 - 21:03

Détails techniques

Version du forum : PunBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.diamant-mandarin-evo.com/

Description du problème

Bonsoir,

J'ai mis en place ce tutoriel : https://forum.forumactif.com/t381565-ajouter-une-barre-de-navigation-flottante

Actuellement la toolbar est au dessus de la barre de navigation flottante lors de la navigation. Ce qui contraint à cacher la toolbar.. Pour pouvoir accéder a la barre flottante.

Je souhaiterai que la barre de navigation flottante arrive au dessus de la toolbar lors de la navigation sur mon forum.

Merci de votre aide.

par Self Jeu 15 Oct 2015 - 20:10

Bonjour,

Essayez en remplaçant le code CSS par ceci :

Code:: /* sticky nav main */ #fa_sticky_nav { font-size:0; /* hide whitespace */ text-align:center; background:#FAFAFA; border-bottom:1px solid #CCC !important; height:30px; position:fixed; right:0; z-index:999; overflow:hidden; transition:top 200ms linear,width 600ms ease-in-out; } #fa_sticky_nav li { display: inline } /* navlist adjustment */ /* sticky menu links */ #fa_sticky_nav a.mainmenu { color:#39C; font-size:12px; font-weight:bold; font-family:"Trebuchet MS",Arial,Verdana,Sans-serif; background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px; display:inline-block; padding:0 10px; height:30px; line-height:30px; transition:200ms; } #fa_sticky_nav a.mainmenu:hover,#fa_sticky_nav a.mainmenu.fa_navactif { background-position: 0 25px; } /* sticky nav toggler */ #fa_sticky_toggle { background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA; border:1px solid #CCC; border-right:none; display:inline-block; height:29px; width:30px; position:fixed; right:30px; z-index:999; transition:top 200ms linear; } #fa_sticky_toggle:hover { background-position: -30px 0 } /* make hidden toolbar similar to toggler */ #fa_toolbar_hidden { border-radius:0 !important; border:1px solid #CCC; border-right:0; border-top: 0; } /* post offset fix */ .post div[style*="-30px;"] { top:-60px !important; } #fa_toolbar { top:30px; z-index:1 !important; } #fa_sticky_nav { z-index:999; } #fa_toolbar_hidden { margin-top: 30px; }

Et le code javascript par ceci :

Code:: (function() { if (!window.FA) window.FA = {}; if (FA.Nav) { if (window.console && console.warn) console.warn('FA.Nav has already been defined'); return; } FA.Nav = { // TARGET NODES POUR CHAQUE VERSION // PHPBB2 : ".bodyline > table + table" // PHPBB3 : "#page-header .navlinks" // PUNBB : "#pun-navlinks" // INVISION : "#submenu" targetNode: "#pun-navlinks", customNav: '', // custom navlinks keepDefault: true, // keep the default navlinks collapsible: true, // show hide button // offset states offsets: { tbVisible: { bottom: 30, top: '0px' }, tbHidden: { bottom: 0, top: '0px' }, toggler: '0px' }, activeOffset: {}, // active offset for the sticky nav visible: false, // sticky nav is visible // check the state of the static nav checkState: function() { if (!FA.Nav.animating) { var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom; if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) { if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler; FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top; FA.Nav.visible = true; } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') { if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px'; FA.Nav.barSticky.style.top = '-30px'; FA.Nav.visible = false; } } }, animating: false, // sticky nav is animating // animate the sticky nav when the toolbar is toggled animate: function() { if (FA.Nav.visible) { FA.Nav.animating = true; FA.Nav.barSticky.style.transition = 'none'; $(FA.Nav.barSticky).animate({ top: FA.Nav.activeOffset.top }, function() { FA.Nav.barSticky.style.transition = ''; FA.Nav.animating = false; FA.Nav.checkState(); }); } }, // toggle sticky navigation and remember preference via cookies toggle: function() { if (FA.Nav.barSticky.style.width == '100%') { my_setcookie('fa_sticky_nav', 'hidden'); FA.Nav.barSticky.style.width = '0%'; } else { my_setcookie('fa_sticky_nav', 'shown'); FA.Nav.barSticky.style.width = '100%'; } return false; } }; $(function() { // set default offsets based on toolbar state FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible; if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px'; // find the static nav FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav if (FA.Nav.barStatic) { $(function() { FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav); FA.Nav.barSticky.id = 'fa_sticky_nav'; FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%'; FA.Nav.barSticky.style.top = '-30px'; document.body.appendChild(FA.Nav.barSticky); // append the sticky one // sticky nav toggler if (FA.Nav.collapsible) { FA.Nav.toggler = document.createElement('A'); FA.Nav.toggler.id = 'fa_sticky_toggle'; FA.Nav.toggler.href = '#'; FA.Nav.toggler.style.top = '-30px'; FA.Nav.toggler.onclick = FA.Nav.toggle; document.body.appendChild(FA.Nav.toggler); }; window.onscroll = FA.Nav.checkState; // check state on scroll FA.Nav.checkState(); // startup check // animate sticky nav and change offsets when the toolbar is toggled $('#fa_hide').click(function() { FA.Nav.activeOffset = FA.Nav.offsets.tbHidden; FA.Nav.animate(); }); $('#fa_show').click(function() { FA.Nav.activeOffset = FA.Nav.offsets.tbVisible; FA.Nav.animate(); }); }); } }); }());