Umieszczenie zmiennych

Witam, chciałem zrobić prosty program z użyciem biblioteki jquery, gdzie przy skrolowaniu będzie zmieniał się napis na samym dole równolegle z daną sekcją. Zauważyłem, że jeśli umieszczę zadeklarowane stałe oraz zmienna przed on.click('scroll',function(){}) wtedy program nie działa prawidłowo, w przeciwieństwie gdy uzyje ich w wewnątrz funkcji w bloku scroll listenera, z czego wynika ta nieprawidłowość?

https://jsfiddle.net/evbhsuq3/

Jeśli ustawisz wszystkie wartości zmiennych przed blokiem $(document).on("scroll", ...)

const scrollPos = $(document).scrollTop();
const s1Distance = $(".sekcja1").offset().top;
const s2Distance = $(".sekcja2").offset().top;
const s3Distance = $(".sekcja3").offset().top;
const s4Distance = $(".sekcja4").offset().top;

$(document).on("scroll", function() {
  // ...
})

to aktualna pozycja scrollbara zostanie pobrana jedynie tylko raz, na samym starcie i później się nie zmieni. A więc podczas przewijania scrollbara żadna wartość nie zostanie zaktualizowana.

Przykładowo strona zostanie załadowana praktycznie na samym początku z wartością 30px, przewijasz o kilka sekcji w dół i wartość zmiennej nadal wynosi 30px, bo nie zostaje obliczona ponownie.

W tym wypadku cały blok zostaje wykonany ponownie przy każdym przewinięciu

$(document).on("scroll", function() {
  const scrollPos = $(document).scrollTop();
  const s1Distance = $(".sekcja1").offset().top;
  const s2Distance = $(".sekcja2").offset().top;
  const s3Distance = $(".sekcja3").offset().top;
  const s4Distance = $(".sekcja4").offset().top;

  // ...
})

I jeśli początkowa wartość wynosiłaby tak samo 30px jak w poprzednim przykładzie to po przewinięciu w dół, wszystko byłoby prawidłowo aktualizowane 100px -> 200px -> 250px itd

Dziękuje, teraz wszystko stało się jasne :)