Barre de navigation fixe puis flottante.

[Space Sapien]

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

[Space Sapien]

Up

[Invité]

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 !!!!

[Space Sapien]

Ah oui, parfait 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é

[oxymore]

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);

[tntnfree]

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

[Space Sapien]

@oxymore Alors merci, c'est tout à fait l'effet que je recherche 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 =/

[oxymore]

Bonsoir

Vous avez essayer de changer la valeur dans le javascript?

Code:

"top": '50px'

[Space Sapien]

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