Bonjour à tous ! 

Je viens vers vous car je n'arrive pas à utiliser la bonne syntaxe pour faire ce que je souhaite. J'ai un niveau correct en HTML et CSS mais lorsqu'il s'agit du javascript je galère un peu à personnaliser ce que je trouve sur le net. J'ai trouvé ce code pour faire en sorte que mon header disparaisse dès que l'on scroll de 100px vers le bas et ré apparaisse dès que l'on scroll de 100 px vers le haut et cela fonctionne très bien : 

var didScroll;
var lastScrollTop = 0;
var delta = 100;
var navbarHeight = $('header').outerHeight();


$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);


function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('header_down_studio').addClass('nav-up-studio');
       /* $('#image_studio').removeClass('video-trailer').addClass('video-trailer-up');*/
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up-studio').addClass('header_down_studio');
         /*   $('#image_studio').removeClass('video-trailer-up').addClass('video-trailer');*/
        }
    }
    lastScrollTop = st;
};

Cependant, j'aimerais faire en sorte que cette fonction ne s'applique qu'à partir du moment où l'on a déjà scrollé les 400 premiers pixels de la page (et inversement, se désactive lorsque l'on revient dans la zone des 400 premiers pixels en haut de page)

J'ai essayé de le coupler avec cette fonction que j'ai récupérée ailleurs mais après plusieurs combinaisons assez hasardeuses je n'arrive toujours pas à les imbriquer correctement pour que ça fonctionne : 

$(window).scroll(function(e) {
    var ScrollTaupe = $(window).scrollTop();

    if(ScrollTaupe > 400) {
        ........;
    } 

    else { 
        ........;
    }

});

Quelqu'un aurait-il la solution à mon problème ? 

Merci d'avance ! 

-
Edité par FrédériqueFERRAND 23 avril 2018 à 16:47:30

la variable delta n'est pas la limite de px justement?

edit : je pense avoir trouvé le même exemple que celui que tu as trouvé, j'ai modifié le delta et ca descend plus tard donc modifie ton delta a 400 et ca devrait être ok

-
Edité par PaulTanné 23 avril 2018 à 16:00:39

D'après ce que j'ai compris, delta représente le nombre de pixels que je dois scroller vers le bas pour voir disparaître mon header (ou vers le haut pour le voir réapparaître) et ce à n'importe quel moment. J'aimerais que cette valeur là soit plus grande mais seulement sur les 400 premiers pixels de la page. C'est à dire retarder seulement la "première disparition"...

Désolée je m'exprime pas très bien là dessus, j'espère que je suis compréhensible !

Edit : Oups je n'avais pas vu ton edit ! Oui en effet j'ai dejà essayé de changer delta mais le problème c'est que si je le mets à 400, cela veut dire également que le visiteur devra scroller de 400px vers le haut pour voir réapparaître le header et j'ai besoin que cette valeur là reste à 100

-
Edité par FrédériqueFERRAND 23 avril 2018 à 16:18:31

J'ai fait un truc x)))) je suis en stage donc je passe très rapidement sur ton souci, j'ai mis ca : 

// If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
        delta=100;
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
            delta=400
        }

en gros qd tu descend ta un delta de 400 px avant que le header ne s'en aille, et quand tu remonte du coup il est a 100