Forum : Navbar fixed when scroll

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

Réponse acceptée

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

Auteur

Je te remerci ton code marche très bien

Arkantos

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

Bon week-end,
Arkantos