Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)
Le Deal du moment :
Kingston A400 – SSD interne – ...
Voir le deal
81.90 €

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Absente / peu présente le soir à partir de 18h30
----
Idea Viens papoter avec nous sur le discord

Messages : 4323
https://tambouille-raleuses.forumactif.com/

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

le Ven 20 Mar 2020 - 17:01

[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 Smile

Quand tu es en haut de ta page:
[ModernBB] Retirer/fixer le "sticky" de la barre de navigation Haut_f10

Quand tu scroll sur ta page:
[ModernBB] Retirer/fixer le "sticky" de la barre de navigation Scroll10

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 Wink

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)

Une modification de templates

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 Wink 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é Smile
Voyons voir pour la placer comme nous l'avons fait ici.

Fixer la barre de navigation en haut

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)

Idea 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 Smile



_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses