Barre de navigation fixe puis flottante.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Barre de navigation fixe puis flottante.

Message par Space Sapien le Dim 15 Mar 2015 - 18:34

Bonjour à tous,

je ne sais pas si mon titre est des plus explicite. Je fais des modifications sur mon forum de test, et je rencontre des difficultés avec ma barre de navigation. Comme vous pouvez le voir ici. J'aimerai notamment que la barre de navigation soit fixe lorsque l'on arrive sur le forum, mais lorsque le scroll arrive au niveau de la barre de navigation celle-ci devient flottante. L'idée serait de me permettre de faire une barre de navigation imposante à l'arrivée du forum puis plus discrète lorsqu'elle suit l'utilisateur pendant sa navigation sur la page.

Pour essayer d'atteindre mes attentes, j'ai créé deux class, un fixe et un flottant puis j'ai essayé de passer par du javascript pour que la barre change de class au bon moment mais ça ne fonctionne pas x)

Css :
Code:
.navig {position: relative;
z-index: 998; 
  left: 0px;
top: 0px;
...
}
Code:
.navig.floatable {
position: fixed;
z-index: 998; 
  left: 0px;
top: 0px;
...
}

Javascript dans overall_header :
Code:
<script type="text/javascript">

var positionElementInPage = $('.navig').offset().top;
$(window).scroll(
function() {
if ($(window).scrollTop() >= positionElementInPage) {

$('.navig').addClass("floatable");
} else {

$('.navig').removeClass("floatable");
}
});
 
   </script>

J'ai également un soucis avec la barre de navigation qui ne colle pas la bordure rouge que j'ai ajouté à la toolbar alors que j'ai bien précisé dans la position du css, top :0px...

Merci pour vos futurs réponses Smile



Dernière édition par Space Sapien le Mar 17 Mar 2015 - 9:44, édité 1 fois

Space Sapien
***

Masculin
Messages : 183
Inscrit(e) le : 28/07/2013

http://deliriums.forumgratuit.org
Space Sapien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation fixe puis flottante.

Message par Space Sapien le Lun 16 Mar 2015 - 9:56

Up

Space Sapien
***

Masculin
Messages : 183
Inscrit(e) le : 28/07/2013

http://deliriums.forumgratuit.org
Space Sapien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation fixe puis flottante.

Message par R-max le Lun 16 Mar 2015 - 10:12

bonjour ,

ta barre de navigation qui est d'origine sur le forum , et toujours la ,donc ça crée un espace ,car elle est en visibility:hidden=(caché)
il faut la mettre en display:none=(ne pas affiché)et la div s’effacera..
donc ta barre navigation personnelle va remonté
pour le reste , je ne sais pas te dire !!!!

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation fixe puis flottante.

Message par Space Sapien le Lun 16 Mar 2015 - 11:17

Ah oui, parfait Very Happy Merci

Me reste plus qu'à trouver l'aide d'un maître en la matière de javascript et je pourrai mettre le sujet en résolu.

PS: D'ailleurs, je viens de réaliser que je me suis un peu emballé pour le up, je n'avais pas fais attention à l'heure où j'avais posté mon premier message, d'habitude je fais attention. Désolé Mad

Space Sapien
***

Masculin
Messages : 183
Inscrit(e) le : 28/07/2013

http://deliriums.forumgratuit.org
Space Sapien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation fixe puis flottante.

Message par oxymore le Lun 16 Mar 2015 - 19:35

Bonsoir

Si j'ai bien compris vous voulez mettre 2 navigations différentes qui changent lors d'un scroll..

Code:
<div class="navig">MENU</div>

<div class="navig1">MENU2</div>

Code:
.navig {
    position: fixed;
    top:20px;
      }
.navig1 {

 
    position: fixed;
  top:-50px;
        }
et dans les javascript
Code:
function update() {
    if ($(window).scrollTop() > 50) {
        $(".navig").hide();
        $('.navig1').animate({
            "top": '50px'
        }, 300);
    } else {
        $(".navig").show();
        $('.navig1').animate({
            "top": '-90px'
        }, 300);
    }
}

setInterval(update, 500);


oxymore
**

Messages : 84
Inscrit(e) le : 09/11/2008

http://www.google.fr
oxymore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation fixe puis flottante.

Message par tntnfree le Lun 16 Mar 2015 - 20:57

L'idée serait de me permettre de faire une barre de navigation imposante à l'arrivée du forum puis plus discrète lorsqu'elle suit l'utilisateur pendant sa navigation sur la page.



_____________
bella

tntnfree
Nouveau membre

Messages : 2
Inscrit(e) le : 16/03/2015

tntnfree a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation fixe puis flottante.

Message par Space Sapien le Lun 16 Mar 2015 - 23:23

@oxymore Alors merci, c'est tout à fait l'effet que je recherche Smile Ya juste un soucis, la seconde barre de navigation qui apparaît au scroll n'est pas collé en haut du navigateur ( 0px entre le haut de la fenêtre et la barre de navigation ). Il y'a un espace vide de 40px à peu près. J'ai essayé de régler ça en changeant les valeurs mais ça ne bouge pas =/

Space Sapien
***

Masculin
Messages : 183
Inscrit(e) le : 28/07/2013

http://deliriums.forumgratuit.org
Space Sapien a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation fixe puis flottante.

Message par oxymore le Lun 16 Mar 2015 - 23:59

Bonsoir

Vous avez essayer de changer la valeur dans le javascript?
Code:
"top": '50px'

oxymore
**

Messages : 84
Inscrit(e) le : 09/11/2008

http://www.google.fr
oxymore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation fixe puis flottante.

Message par Space Sapien le Mar 17 Mar 2015 - 9:44

Ah non je pensais l'avoir fait mais de toute évidence c'est la seule valeur "top" que je n'ai pas touché hier. Merci tout marche Smile

Space Sapien
***

Masculin
Messages : 183
Inscrit(e) le : 28/07/2013

http://deliriums.forumgratuit.org
Space Sapien a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum