Discussion :

[OlivierJo]

Bonjour

Je suis face à un problème de mathématique basique (?!) dans lequel j'aimerai que mon titre s'étende jusqu'en bout de ligne en fonction du scroll du document. J'ai réussi à appliquer cela à une progress bar, mais je n'arrive pas à l'appliquer sur mon titre.

J'ai créer un simple Jsfiddle pour vous montrer mon problème :
https://jsfiddle.net/uq5tLns0/
Il faut que : "The" reste à gauche. "Master's" se cale au milieu et "Clock" se cale en bout de ligne.

Selon moi il faut tenir compte de la largeur du document + de la largeur du mot que j'aimerai étendre en bout de ligne, mais je n'arrive pas à l'appliquer à mon script.

Avez-vous des pistes / recommandations ? Je vous serais éternellement reconnaissant, étant dessus depuis déjà pas mal de temps...

Merci d'avance !
Olivier

[mathieu]

essayez avec le code suivant.
les coefficients dépendent de différents paramètres css comme la taille de la police. donc vous devrez surement les adapter si vous modifiez quelque chose.

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
$(document).on("scroll", function () {
 
    var pixels = $(document).scrollTop();
    var pageWidth =  $('header').width() ;
    var pageHeight = $(document).height() - $(window).height();
 
    var progress = 100 * pixels / pageHeight;
    let coef = pageWidth / 291 - 337 / 291; // calcul de la largeur final en fonction de la largeur de la page
 
    var progress2 = 0.96 * progress * coef;
    var progress3 = 2.9 * progress * coef;
 
    console.log(pageWidth);
 
 
    $("#progressbar").attr('value', progress);
    $("#space2").css('margin-left', progress2 + '%');
    $("#space3").css('margin-left', progress3 + '%');
 
});