Souci barre de navigation flottante

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Souci barre de navigation flottante

Message par K@K Mar 22 Mar 2016 - 17:02

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://forumtestpourtester.forumactif.org/

Description du problème

Bonjour,

voilà j'ai un forum test où comme son nom l'indique je test les scripts et autres changements avant de les mettres directement sur le forum.
J'ai suivi ce tuto -->https://forum.forumactif.com/t381565-ajouter-une-barre-de-navigation-flottante.
J'ai donc fait quelque modif mais je n'arrive pas à retirer la ligne noir ( flèches rouge ) et à faire disparaitre entièrement le menu flottant lorsque le forum est tout en haut ( ovale orange ).
Pourriez vous m'aider ?
Merci.


Dernière édition par K@K le Mer 23 Mar 2016 - 9:35, édité 1 fois
K@K

K@K
*****

Masculin
Messages : 848
Inscrit(e) le : 04/04/2008

http://www.1302-03only.com/forum
K@K a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci barre de navigation flottante

Message par Ange Tuteur Mar 22 Mar 2016 - 18:47

Salut K@K,

Remplacer le code JavaScript par :
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 : "#page-header .navlinks",
   
    customNav : '', // custom navlinks
   
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
   
   
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '30px'
      },
     
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
     
      toggler : '30px'
    },
   
    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 != '-60px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-60px';
          FA.Nav.barSticky.style.top = '-60px';
          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();
        });
      });
    }
  });
}());

Et ajouter le CSS suivant dans votre feuille de style pour cachér la ligne noir.
Code:
#fa_sticky_nav { border:none }

Bonne soirée
Ange Tuteur

Ange Tuteur
****

Masculin
Messages : 482
Inscrit(e) le : 16/11/2013

https://fmdesign.forumotion.com
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci barre de navigation flottante

Message par K@K Mer 23 Mar 2016 - 9:35

Bonjour,
parfait merci Yes
K@K

K@K
*****

Masculin
Messages : 848
Inscrit(e) le : 04/04/2008

http://www.1302-03only.com/forum
K@K a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum