Własny pasek postępu podczas przewijania

Ciekawe efekty, które można umieścić na stronie Internetowej powodują chęć nauki i rozwijania umiejętności.Właśnie takim efektem jest pasek przewijania znajdujący się na górze lub dole strony w zależności w jakiej pozycji strony się znajdujesz, czy na górze, środku czy na dole strony. W tym poradniku pokażę jak zrobić to w bardzo prosty i krótki sposób.

 Zacznijmy od umieszczenia podstawowej struktury strony w HTML:

<!DOCTYPE html>
<html lang="pl" dir="ltr">
 <head>
  <meta charset="utf-8">
  <title>Pasek</title>
 </head>
 <body>
  <div class="pasek"></div>
 </body>
</html>

Jak widać umieszczony został element DIV, w którym będziemy wyświetlać pasek postępu podczas przewijania strony. Pasek postępu będzie zwiększał się lub zmniejszał się w zależności od odczytu w jakiej pozycji jest scroll. W kolejnym kroku należy za pomocą kodu CSS umieścić pasek na górze strony oraz dokonać formatowania strony.

Dodajemy styl do strony oraz paska.

Dodajmy styl dla znacznika body oraz naszego paska. W znaczniku body dodjmeny wysokość strony oraz jakiś gradient, aby było widać że przewijamy. Dla naszego znacznika DIV dodajmy klasę, którą nazwałem pasek.

<style>
 body {
  margin: 0;
  padding: 0;
  height: 500vh;
  background: -webkit-linear-gradient(#c66cc6, #020202);
  background: -o-linear-gradient(#c66cc6, #020202);
  background: linear-gradient(#c66cc6, #020202);
 }

 .pasek {
  height: 40px;
  width: 0%;
  background-color: red;
  transition: .5s linear;
  position: fixed;
  top: 0;
  left: 0;
 }
</style>

Skrypt JS odczytujący parametry okna

W dalszej części musimy odczytać położenie naszego paska oraz wielkość naszej strony. Zrobimy to za pomocą skryptu javascript. Na początek zapoznamy się z instrukcjami:

  1. document.documentElement.offsetHeight -zwraca wartość liczbową – wysokość naszej  całej strony.
  2. window.scrollY – zwraca położenie scroll względem górnej części okna, ale należy pamiętać, że zwraca wartości od 0 ale nie do końca okna przeglądarki, tylko do elementu przesuniętego.
  3. window.innerHeight – ustalamy wysokość okna przeglądarki (widoczna część).

Po zakończeniu odczytywania okna możemy obliczyć w której części okna znajdujemy się poprzez wykonanie działania:

aktualnyScroll = window.scrollY / (document.documentElement.offsetHeight – window.innerHeight)

Po wykonaniu tego działania otrzymujemy wyniki od 0 do 1, a my przecież wielkość paska ustalamy w procentach od 0 do 100. Należy naszą wartość wymnożyć przez 100 oraz zaokrąglić do całości za pomocą funkcji matematycznej Math.round(), gdzie w nawiasach podajemy argument jako liczbę rzeczywistą.

Ostatnią czynnością jest zastąpienie wartości szerokość (width) dla klasy pasek w CSS, wykonamy to za pomocą pobrania całego selektora CSS za pomocą instrukcji: document.querySelector(„nazwa_klasy”) , a następnie odwołanie się do naszego obiektu poprzez: obiekt.style.własność_css = wartość;

Skrypt gotowy znajduję się poniżej:

<script>
  const pas = document.querySelector(".pasek");
  const statusPaska = function() {
    aktualnyScroll = Math.round( window.scrollY / (document.documentElement.offsetHeight - window.innerHeight) * 100);
    aktualnyScroll = aktualnyScroll + "%";
    pas.style.width = aktualnyScroll;
  }
  window.addEventListener("scroll", statusPaska);
</script>

Cała zwartość strony:

<!DOCTYPE html>
<html lang="pl" dir="ltr">
<head>
<meta charset="utf-8">
<title>Pasek</title>
<style>
body {
margin: 0;
padding: 0;
height: 500vh;
background: -webkit-linear-gradient(#c66cc6, #020202);
background: -o-linear-gradient(#c66cc6, #020202);
background: linear-gradient(#c66cc6, #020202);
}
.pasek {
height: 40px;
width: 0%;
background-color: red;
transition: .5s linear;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="pasek"></div>
<script>
const pas = document.querySelector(".pasek");
const statusPaska = function() {
aktualnyScroll = Math.round(window.scrollY / (document.documentElement.offsetHeight - window.innerHeight) * 100);
aktualnyScroll = aktualnyScroll + "%";
pas.style.width = aktualnyScroll;
}
window.addEventListener("scroll", statusPaska);
</script>
</body>
</html>

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>