Compteur de visites gratuit
CAForum infos
Derniers sujets
» » Modifier l'apparence du qeel
[phpBB3] bare de navigation Clock-10Mer 18 Sep 2019 - 23:44 par Cofeeandnothingelsethanks

» » Un texte qui clignote
[phpBB3] bare de navigation Clock-10Mer 18 Sep 2019 - 23:43 par Cofeeandnothingelsethanks

» » HTTPS Everywhere
[phpBB3] bare de navigation Clock-10Mer 18 Sep 2019 - 12:49 par David1195

» » [Edge] Fermeture automatique des volets widgets sur le forum
[phpBB3] bare de navigation Clock-10Mer 18 Sep 2019 - 12:41 par David1195

» » Menu de recherche instantanée
[phpBB3] bare de navigation Clock-10Mer 18 Sep 2019 - 11:28 par LilaCH

» » Widget : Sujets récents d'un sous-forum spécifique
[phpBB3] bare de navigation Clock-10Mer 18 Sep 2019 - 11:26 par LilaCH

» » Une barre de statistiques comme sur le FDF
[phpBB3] bare de navigation Clock-10Mer 18 Sep 2019 - 11:25 par LilaCH

» » Ajouter un bouton de prévisualisation aux titres des topics
[phpBB3] bare de navigation Clock-10Mer 18 Sep 2019 - 11:25 par LilaCH

» » Les palindromes
[phpBB3] bare de navigation Clock-10Mer 18 Sep 2019 - 11:23 par LilaCH

» » Mise à jour, Problèmes - Les dernières informations de Forumactif
[phpBB3] bare de navigation Clock-10Mer 18 Sep 2019 - 11:12 par Splash

» » [Tuto] Créer une page HTML
[phpBB3] bare de navigation Clock-10Mar 17 Sep 2019 - 20:50 par David1195

» » Le coucou du jour
[phpBB3] bare de navigation Clock-10Mar 17 Sep 2019 - 20:49 par David1195

» » [Tuto] Le record du nombre d'utilisateurs en ligne
[phpBB3] bare de navigation Clock-10Mar 17 Sep 2019 - 20:48 par David1195

» » [Tuto] Créer un widget personnalisé
[phpBB3] bare de navigation Clock-10Mar 17 Sep 2019 - 20:47 par David1195

» » Modifier la partie des stats en début de qeel
[phpBB3] bare de navigation Clock-10Mar 17 Sep 2019 - 20:46 par David1195

Septembre 2019
LunMarMerJeuVenSamDim
      1
2345678
9101112131415
16171819202122
23242526272829
30      

Calendrier Calendrier

[phpBB3] bare de navigation

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

francis 1

francis 1

Membre
Membre

Messagefrancis 1 le Lun 10 Déc 2018 - 22:16

  • MP
  • Zoom
bonjour, je voudrais que ma bare de navigation qui se trouve sous ma banniere reste en haut de toutes les pages quand on descend sur les pages

merci a vous de me donner les codes et les endroits ou les mettres !
bonne soirée a vous !
Splash

Splash

StaffAdmin
StaffAdmin

MessageSplash le Lun 10 Déc 2018 - 23:11

  • MP
  • Zoom
Hi l'ami,

Il existe un tuto sur le FDF à ce sujet, "Ajouter une barre de navigation flottante", voici le lien : https://forum.forumactif.com/t381565-ajouter-une-barre-de-navigation-flottante

Pour ton forum, install ce script Sur toutes les pages :
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 != '-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();
        });
      });
    }
  });
}());

Ensuite va mettre ce code à la CSS :
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('https://i.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('https://i.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:0;
  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;
}

Au scroll vers le bas la navbar apparaitra ainsi

[phpBB3] bare de navigation Navbar10

Au clic sur ce bouton

[phpBB3] bare de navigation Nav10

Tu masque ou tu affiches cette navbar flottante

:u1:
A bientôt



† Aucune aide ne sera donnée en privé
francis 1

francis 1

Membre
Membre

Messagefrancis 1 le Mar 11 Déc 2018 - 10:45

  • MP
  • Zoom
bonjour a tous, merci a vous pour les infos, c'est nikel , tout fonctionne bien ! c'est un peu domage que le fond de la bare de navigation flotante reste blanc ! est il possible de changer la coulleur en orange ?
Splash

Splash

StaffAdmin
StaffAdmin

MessageSplash le Mar 11 Déc 2018 - 11:05

  • MP
  • Zoom
Hi francis,

Oui c'est possible, dans ton code CSS tu as 2 fois cette couleur #FAFAFA qui correspond à la couleur blanche de cette navbar.
Remplace là par la couleur de ton choix



† Aucune aide ne sera donnée en privé
francis 1

francis 1

Membre
Membre

Messagefrancis 1 le Mar 11 Déc 2018 - 11:37

  • MP
  • Zoom
grand merci a toi , ca marche nickel !

amitiés
Splash

Splash

StaffAdmin
StaffAdmin

MessageSplash le Mar 11 Déc 2018 - 15:40

  • MP
  • Zoom
Génial l'ami

Problème résolu
Ce topic est fermé
Il peut être réouvert sur demande

 Droite ici Gauche

À bientôt.



† Aucune aide ne sera donnée en privé

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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