Discussion :

[Charly_Kb]

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

[Toufik83]

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