Forum de l’article

Le bandeau

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Rappel de la discussion
Bandeau et menu fixe au haut de la page
Luc - le 26 septembre 2021

Bonjour,
Pour le bandeau, peut-on sans bousculer la logique d’Escal dans son ensemble demander à ce que le bandeau et le menu horizontal soient fixe de manière à toujours être visible lorsqu’on progresse dans la lecture de la page ?
Y-a-t-il des options qui permettent de le faire dans le paramétrage privé d’Escal (je ne pense pas mais on ne sait jamais).

Merci encore.

Une piste envisageable ?
Luc - le 26 septembre 2021

En essayant de trouver une solution simple... j’arrive sur des choses complexes et je ne suis pas sûr que sous Escal on puisse lancer des modifs qui pourraient bousculer l’ensemble.
_J’ai trouvé ici un trés bon article
https://desgeeksetdeslettres.com/web/menu-fixe-mais-flottant-selon-la-scrollbar-js-css

Cet internaut propose de passer par un peu de javascript

votre_menu_ou_votre_image_ou_votre_element.floatable {
 position: fixed;
 top: 10px; // non-obligatoire
 }

ainsi que

// listen for scroll
 var positionElementInPage = $('#votre_menu_ou_votre_image_ou_votre_element').offset().top;
 $(window).scroll(
 function() {
 if ($(window).scrollTop() >= positionElementInPage) {
 // fixed
 $('#votre_menu_ou_votre_image_ou_votre_element').addClass("floatable");
 } else {
 // relative
 $('#votre_menu_ou_votre_image_ou_votre_element').removeClass("floatable");
 }
 }
 );
Bandeau et menu fixe au haut de la page
Jean Christophe Villeneuve - le 26 septembre 2021

Hello

Si si pour le menu horizontal, c’est prévu (mais pas pour le bandeau).
C’est la dernière option de réglage de la partie "Affichage" pour le menu horizontal.

Pour fixer l’ensemble du bandeau et du menu, un

#entete {
	position: fixed;
	z-index: 1000;
}

dans /squelettes/styles/perso.css devrait faire l’affaire

Bandeau fixe et scroll
baumstark luc - le 2 octobre 2021

Merci de ce retour.

Effectivement. C’est ce que je pensais, cette option était active chez moi... mais cela ne fonctionnait pas (problème de cache... en insistant... c’est apparu). Bon. Pour le menu on obtient bien ce qu’on souhaite. Il se fixe au cours du défilement de la page.

Pour le bandeau, j’ai mis le code que tu proposes. Mais le résultat est un peu curieux... car le bandeau se met immédiatement sur le reste de la page d’accueil (sur les articles : le haut de la page ne débute plus par le bandeau mais par les articles et le bandeau se colle dessus). Et lorsqu’on fait défiler la page, l’option sur le menu fonctionne toujours (j’avais laissé l’option précédente ouverte) : il se fixe bien en haut de la page et le bandeau par contre se met alors juste en dessous comme si il y avait bien la priorité à l’affichage du menu sur celui du bandeau).

Sinon, je me demandais s’il était possible de changer le bandeau au moment où l’on demande de le fixer sur la page. L’idée, c’est que le bandeau puisse être assez large lorsque l’internaute découvre la page d’accueil mais que lorsqu’il commence à lire et que la page défile, ce bandeau switche sur un bandeau plus discret (comme un rappel) mais restant malgré tout visible pour ne pas totalement perdre l’identité du site... j’ai bien conscience qu’on entre là dans des choses beaucoup plus complexes.
J’ai cherché à modifier le html là où le div devient menudesk floatable... en me disant que je pourais alors mettre là un autre background image... mais... je n’ai pas pu aller au bout de mon idée... car je suis audelà de mon périmètre de compétence.
Merci pour tout. Luc

Bandeau et menu fixe au haut de la page
Jean Christophe Villeneuve - le 3 octobre 2021

Alors, on peut régler ce problème de dépassement en faisant ceci :

  • d’abord tu vas décocher l’option de fixation du menu dans la config d’escal
  • ensuite tu vas bien garder le perso.css tel que tu l’as écrit
  • enfin tu vas rajouter un fichier persoconfig.css.html à la racine du dossier /squelettes et dans ce fichier, tu vas mettre ceci
    #HTTP_HEADER{Content-Type: text/css;}
     
    #entete {
    	width: #CONFIG{escal/config/largeurlayoutbase,1200}px;
    }

Par contre, pour switcher le bandeau, pour moi aussi c’est au-delà de mon périmètre de compétences.