Pasek postępu, który rozszerza się podczas przewijania strony internetowej

Skoro przeglądasz tego bloga, to jest spore prawdopodobieństwo, że śledzisz również inne, na których można spotkać się z dość ciekawym efektem. Chodzi o pasek postępu, zapełniający się wraz z przewijaniem konkretnej witryny.

Właśnie w tym wpisie chciałbym pokazać Ci jak w nieskomplikowany sposób można stworzyć coś podobnego. Wszystko wykonamy w czystym JavaScript’cie, bo wg mnie nie ma potrzeby ładować całej biblioteki tylko po to, aby nasz kod stał się nieznacznie prostszy. 🙂

Oczywiście demo tego projektu można znaleźć pod tym oto linkiem.


Szkielet HTML.

Jak zawsze wszystko zaczyna się od struktury HTML. W tym przypadku jest dość prosta, a wygląda dokładnie w ten sposób:

<div class="progress-bar">
  <div class="progress-bar__filling"></div>
</div>

Blok o klasie progress-bar__filling jest w praktyce naszym paskiem, który będzie się zwiększać wraz z przewijaniem witryny. Jego granice zakreśla kontener o klasie progress-bar.


Kod CSS.

Zawiera się w tych oto kilku liniach:

.progress-bar {
  position: fixed;
  width: 100%;
  height: 6px;
  top: 0;
}

.progress-bar__filling {
  width: 0;
  height: 100%;
  background-color: #0091ea;
}

Na początku stylujemy kontener, w którym zawiera się nasz progress bar, pozycjonujemy go w taki sposób, aby cały czas znajdował się na samej górze okna przeglądarki oraz nadajemy wymiary (szerokość na całą witrynę oraz wysokość równą 6 pikseli).

Gdy już tego dokonamy, możemy zabrać się za tworzenie naszego dynamicznego paska postępu. Domyślnie przyjęta przez niego szerokość wyniesie 0, dopiero później będzie aktualizowana przez kod JavaScript. Poza tym ustalamy wysokość równą kontenerowi, oraz kolor, który nam odpowiada.


Część najważniejsza – kod JavaScript.

Posiadamy już kod HTML oraz CSS, teraz pora sprawić, aby nasz pasek zaczął działać w pożądany sposób. Jak zawsze pokażę Ci cały kod, a później omówimy go sobie krok po kroku:

function progressBar() {
  var windowTop = window.scrollY,
    documentHeight = document.documentElement.scrollHeight,
    windowHeight = window.innerHeight;

  var totalScroll = (windowTop/(documentHeight-windowHeight))*100;

  document.querySelector('.progress-bar__filling').style.width = totalScroll+'%';
}

window.addEventListener('scroll', progressBar);

Na początku tworzymy funkcję o nazwie progressBar (któż mógłby się spodziewać 😉), w niej znajdzie się kod, przypisany później do zdarzenia scroll.

Zadeklarujmy kilka zmiennych:

  • windowTop – ta zwróci nam ilość pikseli, w których strona została przewinięta.
  • documentHeight – tutaj otrzymamy wysokość całej witryny.
  • windowHeight – podobnie jak w przypadku poprzedniej zmiennej, otrzymujemy wysokość, ale tym razem okna przeglądarki.

Kolejna zmienna o nazwie totalScroll zawiera wynik tego oto obliczenia:

var totalScroll = (windowTop/(documentHeight-windowHeight))*100;

Ilość pikseli zawartą w zmiennej windowTop dzielimy przez wynik odejmowania wysokości okna przeglądarki od wysokości całego dokumentu. Całość zamykamy w nawiasie i mnożymy razy 100. Dzięki temu otrzymujemy wartość wyrażoną w procentach, w której nasza strona została przewinięta od górnej krawędzi.

Jedyne co pozostaje do zrobienia, to aktualizacja stylów omawianego dziś paska postępu:

document.querySelector('.progress-bar__filling').style.width = totalScroll+'%';

Dzięki właściwości querySelector pobieramy element o klasie progress-bar__filling i jako styl CSS ustawiamy wartość z poprzednich obliczeń. Na końcu dodajemy znak procentu, bo to właśnie w nich wartość ma zostać ustawiona.

Na końcu ustawiamy nasłuchiwanie zdarzenia scroll, do którego przypisujemy utworzoną funkcję:

window.addEventListener('scroll', progressBar);

Podsumowanie.

Tak oto powstał nasz pasek postępu. Mam nadzieję, że okaże się przydatny dla Ciebie i urozmaici tworzone w przyszłości strony internetowe.

Jak zawsze jeśli masz jakiekolwiek pytania lub sugestie, to zapraszam Cię do komentowania tego wpisu, a jeśli wyniosłeś z niego wartość, to będę bardzo wdzięczny za jego udostępnienie. 🙂

Programista zakochany w JavaScript’cie, twórca stron internetowych i jak widać od niedawna bloger 🙂

10 comments Add yours
    1. Z tego co dowiedziałem się po opublikowaniu tego wpisu wynika, że powinien być. Widać ten tamat mnie ominął, więc zapoznam się i zaktualizuję artykuł. 🙂

    1. Bardzo chętnie dowiem się dlaczego tak sądzisz, bo na nie dostrzegam różnicy pomiędzy tym sposobem, a prezentowanym w artykule. 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *