[ModernBB] Retirer/fixer le "sticky" de la barre de navigation

Bonjour !

Comme tu l'as peut-être remarqué : sur modernBB, par défaut ta barre de navigation se déplace quand tu scroll sur ta page. Des images seront peut-être plus claire

Quand tu es en haut de ta page:

Quand tu scroll sur ta page:

Cet effet peut être très pratique, mais il peut déranger aussi. Du coup on va voir ici comment le retirer pour garder la barre de navigation en statique : soit comme sur les autres versions, soit comme ici, collée en haut à chaque fois

Pour cela tu dois :
> Avoir accès aux templates
> Avoir des bases en CSS au minimum.

Ce tutoriel est valable avec la toolbarre ou sans, mais si tu l'utilise elle doit être "fixée" (Modules > Toolbarre > Fixer la toolbarre : oui)


On va d'abord retirer le javascript qui gère le changement d'une classe sur la barre de navigation. Pour cela on va aller dans le template overall_footer_end puis on va chercher ce code :

Code:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
  $(window).scroll(function() {
      var header_top = $('#headerbar-top');

      if (header_top.hasClass('w-toolbar')) {
        if ($(window).scrollTop() >= 42) {
            header_top.addClass('is-sticky');
        } else {
            header_top.removeClass('is-sticky');
        }
      } else {
        if ($(window).scrollTop() >= 1) {
            header_top.addClass('is-sticky');
        } else {
            header_top.removeClass('is-sticky');
        }
      }
  });
});
//]]>
</script>

Et on va purement et simplement le retirer.
On enregistre et on oublie pas de publier le template : ça y est notre barre de navigation est fixe en haut, comme quand on ne scroll pas !

Elle peut, bien entendu être déplacée au dessus ou en dessous de la bannière, mais ça n'est pas l'objet de ce tutoriel Pour savoir quelle partie du template correspond à la barre de navigation tu peux te renseigner sur ce tutoriel.

Si tu la souhaitais juste fixe, alors tu peux t'arrêter là, c'est terminé
Voyons voir pour la placer comme nous l'avons fait ici.


Pour coller la barre en haut, la solution la plus simple est de reprendre le style "par défaut" de forumactif quand on scroll, tu as juste une petite manipulation à faire dans le template overall_header. Il suffit de chercher ceci :

Code:

<div id="headerbar-top">

Et de lui ajouter manuellement la classe qui la colle en haut :

Code:

<div id="headerbar-top" class="is-sticky">

Ensuite pour la personnaliser tu fais exactement comme tu le ferai habituellement : dans les couleurs du forum (PA > Affichage > Couleurs > Couleur Fond Catégories)

Ici d'autres modifications sont faisable via la feuille de style également, bien entendu.

---

Si tu rencontre un souci avec ce tutoriel, ou si tu as une question ou besoin d'aide pour la personnalisation, n'hésite pas à le dire