diff --git a/src/index.html b/src/index.html
index f27b58d..b6ef2dc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -30,7 +30,7 @@
-
+
diff --git a/src/js/page-functions.js b/src/js/page-functions.js
index a64fad4..2ce1a17 100644
--- a/src/js/page-functions.js
+++ b/src/js/page-functions.js
@@ -1,29 +1,39 @@
-/* the document element root () */
-const ROOT = document.documentElement;
-
function ScrollTo() {
}
-function ShowElement() {
+function ShowElement(element) {
+ element.classList.toggle("hidden");
+ element.classList.add("visible");
}
-function HideElement() {
+function HideElement(element) {
+ element.classList.toggle("visible");
+ element.classList.add("hidden");
}
-function DetectPageScroll() {
+function TogglePageScrollElement(root, element, ratio) {
/* Maximum number of pixels that can be scrolled by the user */
- let scrollTotal = ROOT.scrollHeight - ROOT.clientHeight;
- let scrollUpButton = document.querySelector(".scroll-up-button");
+ let scrollTotal = root.scrollHeight - root.clientHeight;
- if ((ROOT.scrollTop / scrollTotal) > 0.80) {
+ if ((root.scrollTop / scrollTotal) > ratio) {
/* Show button */
+ ShowElement(element);
} else {
/* Hide button */
+ HideElement(element);
}
}
-document.addEventListener("scroll", DetectPageScroll);
\ No newline at end of file
+document.addEventListener("scroll", () => {
+ TogglePageScrollElement(
+ /* the document element root () */
+ document.documentElement,
+ /* Which element to toggle visibility */
+ document.querySelector(".scroll-up-button"),
+ /* How far the user has to scroll to show the element */
+ 0.50);
+});
\ No newline at end of file