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:
- document.documentElement.offsetHeight -zwraca wartość liczbową – wysokość naszej całej strony.
- 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.
- 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>