Bonjour, 

je galère sur un problème, je cherche à modifier la hauteur d'un menu si la valeur (hauteur) du scroll est inférieur à 60px. La hauteur du menu est de 120px.

Je m'explique : j'aimerai que la hauteur du menu soit égale à sa valeur initiale (ici : 120px) moins celle du scroll (1 puis 2 puis 3 ... jusqu'à 60px)

window.onscroll = function(){
	var scroll = (document.documentElement.scrollTop || document.body.scrollTop);
	var nav = document.getElementById('menu');
	var hauteur = menu.style.height;
	var intElemScrollHeight = document.getElementById('menu').scrollHeight;
	if (scroll < 60){
		menu.style.height = hauteur - intElemScrollHeight ;
	}
}

Merci d'avance

<nav id="menu"></nav>

#menu {
    background: yellowgreen;
    width: 100%;
    height: 120px;
    position: fixed;
    top: 0px;
}

let nav = document.getElementById('menu');
const navHeight = 120;

window.onscroll = function () {
    let scrollY = window.scrollY;

    if (scrollY < 60) {
        menu.style.height = navHeight - scrollY + 'px';
    }
}

ça fonctionne, merci beaucoup !!

1) Quelle est la différence entre let et var pour la déclaration des variables ?

2) Est-il possible de remplacer cette ligne "const navHeight = 120;" par "var navHeight = menu.style.height;" ? j'ai essayer mais ça ne fonctionne pas, le but serait de renseigner qu'une fois la constante de hauteur (dans le programme CSS) et non 2 fois (dans le CSS et le JS) dans le cas d'une éventuelle modification future.

3) Je suppose que "scrollY" permet de mesurer la de combien l'utilisateur descend ?

Merci d'avance