Toolbar transparente qui cache la navigation personnelle

[Hyndeyn]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://anthae-test.forumactif.com/

Description du problème

Bonjour à toutes et tous !

De nombreuses fois, j'ai pu trouver sur ce forum les solutions et/ou les pistes de résolutions à mes problèmes de codage sans avoir la nécessité de m'inscrire, mais aujourd'hui, ne trouvant rien qui puisse m'aider, je saute le pas et m'en viens requérir l'aide de la communauté.

La Toolbar ForumActif est très pratique, et je tiens à la garder. Mais je tiens également à avoir une navigation personnelle supplémentaire en raison de son emplacement (je ne veux donc pas fusionner les deux).

En effet, ma barre de navigation personnelle se trouve en-dessous de la bannière. Je lui ai appliqué un effet sticky afin qu'une fois arrivée tout en haut, au scroll, elle se fixe. Une fois fixée en haut après scroll, la Toolbar passe quoi qu'il arrive par-dessus. En retirant son background, on peut désormais voir la barre de navigation personnelle et c'est top, j'ai le visuel + un petit effet que je trouve sympathique. MAIS ! Les liens de la navigation personnelle ne sont plus accessibles, forcément. En cela réside mon problème.

Mon idée première serait de créer un script, une conditionnelle qui dit que lorsqu'au scroll, quand la barre de navigation personnelle est fixée tout en haut, la Toolbar se cache; et autrement elle reste visible. J'ai vraiment les bases en JS, j'ai bien tâtonné mais sans succès.

Est-ce que ce que je cherche à faire est seulement possible ? Si oui, toute aide/pistes/conseils pour m'aiguiller serait plus que bienvenus ! Quelles seraient les alternatives, si non ?

Je vous remercie d'avance !

[wims]

Bonjour, si j'ai bien compris le problème, essayez ça dans votre CSS :

div#fa_toolbar {z-index: 0;}

[Self]

Bonjour,

Peut-être avec ce petit bout de code :

Code:

$(function(){
   window.addEventListener('scroll', function(){
      var y = window.scrollY, state = $('#fa_toolbar').is(':visible');
      if(state && y > 500){$('#fa_toolbar').fadeOut('fast')}else if(!state && y < 500){$('#fa_toolbar').fadeIn('fast')}
   });
});

[Hyndeyn]

Bonjour !

Merci Wims et Self, pour vos réponses rapides, et d'avoir pris le temps de vous pencher sur mon souci.

Les solutions suggérées sont fonctionnelles !
Z-index: 0 est suffisant, en effet (je ne sais pas pourquoi j'avais en tête qu'on ne pouvait pas l'appliquer sur la Toolbar .... ) mais j'avoue préférer ce petit effet "fade" sympathique. Merci encore à vous deux !

Je passe le sujet en résolu !

Excellente journée à vous !