Bonjour à tous.

Je cherche désespérément (avec jQuery) de faire en sorte qu'une chope de bière se remplisse lors du scroll, mais en vain.

Voici ce que j'ai tenté de faire :

$(window).scroll(function(){
   $(".wave").css('display', 'none');
    var scroll = $(window).scrollTop();
    var dh = $(document).height();
    var wh = $(window).height();
    scrollPercent = (scroll / (dh-wh)) * 100;
    $(".wave").css('top', scrollPercent + '%');
})

Pouvez-vous m'orienter svp ?

Merci d'avance

-
Edité par fliewight 24 novembre 2021 à 11:50:01

Salut, 

voilà un exemple

J'ai mis la position css du cadre rouge sur "fixed" (qui correspond à la choppe), et en "absolute" pour la bière (le cadre vert), la bière est un "enfant" de la choppe, pour la placer en fonction de la choppe. (50% en hauteur par exemple = à mi-hauteur de la choppe).

Ensuite le même calcul que toi sauf que je baisse le "top" et j'augmente le "height" en même temps, et comme le point de repère des éléments html est en haut à gauche de l'élément, il faut aller vers le 0 du parent pour donner l'impression de monter, sinon on descend. Le % du scroll augmente de 0 à 100, donc dans ton code, tu vas aller du haut vers le bas, si tu veux que la bière monte, il faut partir de la valeur actuelle et aller vers le 0.

-
Edité par Arthur222 27 novembre 2021 à 1:08:33