AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [Nihil] Demande d'une barre de navigation fixe un peu spéciale

    Partagez
    En ligne
    avatar
    reshiram44
    MasculinAge : 19Messages : 352

    le Lun 30 Oct 2017 - 18:33

    Ma demande



    Bonjour, je poste ici car j'ai du mal à trouver pour que ma barre de navigation soit fixe tout d abord en dessous de l'image en tête du forum puis lorsque l'on scroll elle se fige en haut de notre écran. Voici quelques schéma de mon explications :


    Schéma(s) et Eléments


    Schémas :
    Barre fixe entre le corps du forum et l'image en tête:
    Barre fixe en haut du forum:
    Version de votre forum : PHPBB2

    Ça serait comme ce site pour restaurant :
    site:
    Merci de votre aide



    En ligne
    avatar
    reshiram44
    MasculinAge : 19Messages : 352

    le Mer 1 Nov 2017 - 0:36

    ip



    En ligne
    avatar
    reshiram44
    MasculinAge : 19Messages : 352

    le Jeu 2 Nov 2017 - 10:51

    up



    En ligne
    avatar
    reshiram44
    MasculinAge : 19Messages : 352

    le Sam 4 Nov 2017 - 13:52

    up



    En ligne
    avatar
    reshiram44
    MasculinAge : 19Messages : 352

    le Lun 6 Nov 2017 - 18:09

    up



    avatar
    Nihil Scar Winspeare
    Messages : 4790

    le Lun 6 Nov 2017 - 19:17

    Coucou :hudada:

    Je peux réaliser ce genre de chose, est ce qu'on peut avoir le lien de ton forum pour que je fasse le code en suivant le design ?

    En ligne
    avatar
    reshiram44
    MasculinAge : 19Messages : 352

    le Lun 6 Nov 2017 - 21:08

    Bonjour, merci de m'aider pour ma demande.
    Voici le lien de mon forum : http://forumbrtest.forumactif.com/



    En ligne
    avatar
    reshiram44
    MasculinAge : 19Messages : 352

    le Jeu 9 Nov 2017 - 18:27

    faut il que je mettre le bouton "en cours" ?



    En ligne
    avatar
    reshiram44
    MasculinAge : 19Messages : 352

    le Jeu 9 Nov 2017 - 20:18

    j'ai trouvé ceci si ça peut aider :
    Spoiler:



    avatar
    Nihil Scar Winspeare
    Messages : 4790

    le Sam 11 Nov 2017 - 22:26

    Merci pour le lien du forum test, et désolée j'ai été un peu occupée cette semaine, j'ai eu un truc imprévu ^^'
    Je ne t'oublie pas, je regarde ça demain ! En attendant j'ai mis le sujet "En cours" Wink

    En ligne
    avatar
    reshiram44
    MasculinAge : 19Messages : 352

    le Dim 12 Nov 2017 - 12:26

    Ok, merci et prend ton temps. ^^



    avatar
    Nihil Scar Winspeare
    Messages : 4790

    le Dim 12 Nov 2017 - 18:46

    De ce que je vois de ton code source sur le forum, la barre grise est en fait la toolbar en haut du forum (pas que la barre de navigation).

    Du coup je suis un peu embêtée, est ce que tu veux la garder et ne fixer la navigation dedans que au scroll ? Est ce que tu ne veux plus de la toolbar ?

    En ligne
    avatar
    reshiram44
    MasculinAge : 19Messages : 352

    le Dim 12 Nov 2017 - 19:16

    non on repart de 0, ma barre qui est ce moment c'était juste un test. Donc ce que je souhaite c'est juste la barre de navigation simple (non le toolbar) qui comme je le disais qu'elle se fixe au moment au moment du scrool après l'image en tête du forum. Suis-je compréhensible dans ce que je dis ? :p



    En ligne
    avatar
    reshiram44
    MasculinAge : 19Messages : 352

    le Dim 12 Nov 2017 - 21:17

    Si on reprend d'un forum Basic c est ici :http://leschapeauxtesteurs.forumactif.com/



    avatar
    Nihil Scar Winspeare
    Messages : 4790

    le Jeu 16 Nov 2017 - 22:42

    Je comprends totalement ce que tu veux, c'était juste par rapport au forum spécifique :hudada:

    Vu que l'autre forum n'a pas de style graphique, je vais donc simplement faire un code basique, tu adapteras toi même le style.

    D'abord, on va modifier le template overall_header. Tu places ta barre de navigation où tu veux qu'elle soit en mode "normal".
    Ensuite on remplace :
    Code:
    {GENERATED_NAV_BAR}

    par :
    Code:
    <div class="forum-navbar">{GENERATED_NAV_BAR}</div>

    Maintenant pour le code JS, tu rajoutes sur toutes les pages ce code :
    PA > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.
    Code:
    $(document).ready(function() {
        var $navBar = $('.forum-navbar'),
            top = $navBar.offset().top,
            $body = $('body');
        $(window).scroll(function() {
            if ($(window).scrollTop() >= top) {
                $body.addClass('sticky-navbar');
            } else {
                $body.removeClass('sticky-navbar');
            }
        });
    });

    Et enfin, le style CSS ! :
    Code:

    /* Style navbar */
    .forum-navbar {
        height: 25px; /* hauteur barre de navigation en mode normal */
    }

    /* Permet de pas avoir de saut lors du scroll */
    .sticky-navbar {
        padding-top: 25px!important; /* hauteur barre de navigation normale*/
    }

    /* Style barre de navigation fixée */
    .sticky-navbar .forum-navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100; /* adapter la valeur, parfois il faudra mettre plus grand*/
        background: black;
        padding: 15px;
    }

    Si ça ne fonctionne pas, est ce que je pourrai avoir le lien du forum où c'est installé s'il te plait ?

    En ligne
    avatar
    reshiram44
    MasculinAge : 19Messages : 352

    Hier à 16:40

    Merci, alors ça répond un peu près à ma demande mais il y a des petits détails qui ne vont pas :p
    alors quand on scroll la barre de navigation va bien au dessus mais c'est comme ci une autre apparaissait car là c'est pas la même que celle qui se trouve en dessous de mon image.
    Du coup j'aimerais que la barre de navigation en dessous de l'image du forum soit tout le long aussi du forum et que ce soit elle qui se déplace et non une autre qui apparaissent. Si cela n'est pas possible, ce n'est pas grave mais bon

    Voici un autre schéma pour l'explication de barre sous l'image du forum (il y a des petits détails en plus mais je pourrais passer une autre commande) :


    Voir l'image en grand

    et là quand on scroll avec la même barre de navigation :

    Voir l'image en grand

    J'ai mis le code ici : http://leschapeauxtesteurs.forumactif.com/



    Contenu sponsorisé


      La date/heure actuelle est Sam 18 Nov 2017 - 9:26