From 39673d1c120d3bee23e211381c65360c30b886d8 Mon Sep 17 00:00:00 2001 From: ReznoRMichael Date: Tue, 16 Feb 2021 19:13:41 +0100 Subject: [PATCH] show and hide element functions --- src/index.html | 2 +- src/js/page-functions.js | 30 ++++++++++++++++++++---------- 2 files changed, 21 insertions(+), 11 deletions(-) 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