IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Changer la couleur du bandeau de navigation lorsque l'on scrolle


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Nouveau candidat au Club
    Homme Profil pro
    Chargé de référencement
    Inscrit en
    Mai 2019
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Chargé de référencement

    Informations forums :
    Inscription : Mai 2019
    Messages : 1
    Par défaut Changer la couleur du bandeau de navigation lorsque l'on scrolle
    Bonjour,

    J'ai repris ce template https://templatemag.com/demo/templat...der/index.html
    et ils font quelque chose en javascript que je n'arrive pas a réaliser sur ma page.
    Le bandeau de navigation devient blanc lors du scroll. Une class s'ajoute automatiquement. Et ça je ne sais pas comment le faire. J'ai réussi à trouver certain des scripts qu'ils utilisent, dont celà : mais si c'est ça, je n'arrive pas à le mettre en application. Certains brave gars accepteraient de jeter un coup d'oeil ? merci de votre aide

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     
    var cbpAnimatedHeader = function() {
        function n() {
            window.addEventListener("scroll", function() {
                o || (o = !0, setTimeout(e, 250))
            }, !1)
        }
     
        function e() {
            var n = t();
            n >= c ? classie.add(r, "navbar-shrink") : classie.remove(r, "navbar-shrink"), o = !1
        }
     
        function t() {
            return window.pageYOffset || a.scrollTop
        }
        var a = document.documentElement,
            r = document.querySelector(".navbar-default"),
            o = !1,
            c = 300;
        n()
    }();

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
     
    	    // ANIMATED ONLY IF NOT AT TOP OF PAGE ON LOAD //
        var $win = $(window);
        if ($win.scrollTop() == 0)
            jQuery('.navbar-fixed-top').addClass('wow');
        else if ($win.height() + $win.scrollTop() == $(document).height()) {
             jQuery('.navbar-fixed-top').removeClass('wow');
        }

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 511
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 511
    Par défaut
    Salut,
    supposons que le id de la barre de navigation est :#js-navbar-fixed et que tu utilises bootstrap, ce bout de code devrait fonctionner :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    var navbar,height_;
    $(window).scroll(function(){
            navbar=$('#js-navbar-fixed');
            height_=navbar.height();
    	if($(window).scrollTop()<=50){
    		navbar.addClass("bg-transparent fixed").css('marginTop',height_);
    	}
    	else navbar.removeClass("bg-transparent").css('marginTop',0);
    });

Discussions similaires

  1. Changer la couleur de la barre du menu après un scroll de la page
    Par kadirimams dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 23/04/2018, 10h36
  2. [XL-2003] Comment changer la couleur d'une cellule lorsqu'elle a été modifiée
    Par robinicol dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 28/01/2011, 15h09
  3. Changer la couleur d'un bouton lorsqu on clique dessus.
    Par arnold95 dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 26/10/2007, 18h24
  4. Changer la couleur du lien lorsque l'on est sur la page
    Par The Molo dans le forum Mise en page CSS
    Réponses: 14
    Dernier message: 17/10/2007, 12h15
  5. Changer de couleur une ligne d'un tableau lorsque l'on passe deçu
    Par mademoizel dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 26/02/2007, 16h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo