Navbar fixed when scroll

Par DareK, il y a 10 ans

Les bases HTML/CSS

Bonjour,
Tout dabord je travaille avec bootstrap et mon code est comme ceci:

<div class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/banner.png" alt="..."> </div> <div class="item"> <img src="img/banner2.png" alt="..."> </div> </div> </div> <nav class="navbar navbar-inverse navbar-static-top center" style="margin-bottom: 0"> <div class="container-fluid"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-home"></i> Accueil</a></li> <li><a href="#"><i class="fa fa-newspaper-o"></i> Actualités</a></li> <li><a href=""><i class="fa fa-shopping-cart"></i> Boutique</a></li> <li><a href="#"><i class="fa fa-comments-o"></i> Forum</a></li> <li><a href="#"><i class="fa fa-exclamation-circle"></i> Règlement</a></li> </ul> </div> </div> </nav>

donc il y a un élément au dessus de la navbar et je voudrai lors du sroll que quand le navbar arrive en haut elle reste fixe et si on remonte elle retourne a son emplacement initiale, j'ai essayer plusieurs method mais je n'ai pas réussit alors si vous pouviez me donner un coup de main.
Merci par avance.

3 réponses

Arkantos, il y a 10 ans

Bonjour DareK,

Je pense qu'il te faudrait un peu de Javascript, ce sera la manière la plus simple.
En utilisant jQuery, tu peux faire comme ceci :

(function($){
    $(document).ready(function(){
        var offset = $(".navbar").offset().top;
        $(document).scroll(function(){
            var scrollTop = $(document).scrollTop();
            if(scrollTop > offset){
                $(".navbar").css("position", "fixed");
            }
            else {
                $(".navbar").css("position", "static");
            }
        });
    });
})(jQuery);

Voilà, teste ce code là et dis moi si ça marche. Si tu as déjà des notions de jQuery, tu ne devrais pas avoir trop de mal à comprendre ce code.

Bonne journée,
Arkantos

DareK, il y a 10 ans

Je te remerci ton code marche très bien

Arkantos, il y a 10 ans

De rien, content d'avoir pu te débloquer !

Bon week-end,
Arkantos