diff options
| author | altaf-creator <athaalaa@gmail.com> | 2024-04-04 16:41:10 +0700 |
|---|---|---|
| committer | altaf-creator <athaalaa@gmail.com> | 2024-04-04 16:41:10 +0700 |
| commit | a26de243da1a42ea9abc4953c1906cf558493883 (patch) | |
| tree | 9dd5d14afda5e451f52ef744bd1408c0e717629f /scripts/scroll.js | |
| parent | d9ef8a652594c782be0422184a8632588805db06 (diff) | |
initial commit for personal git repo server
Diffstat (limited to 'scripts/scroll.js')
| -rw-r--r-- | scripts/scroll.js | 156 |
1 files changed, 80 insertions, 76 deletions
diff --git a/scripts/scroll.js b/scripts/scroll.js index 6c20890..f745db4 100644 --- a/scripts/scroll.js +++ b/scripts/scroll.js @@ -1,76 +1,80 @@ -document.addEventListener('scroll', function () { - progress(); - hideSidebar(); -}); - -function progress() { - const sections = document.getElementsByTagName("section"); - const nodes = document.getElementsByClassName("node"); - - if (nodes[0]) { - for (var i = 0; i < sections.length; i++) { - if (isInViewport(sections[i])) { - nodes[i].style.width = "22px"; - nodes[i].style.height = "22px"; - nodes[i].style.backgroundColor = "black"; - } - else { - nodes[i].style.width = "13px"; - nodes[i].style.height = "13px"; - nodes[i].style.backgroundColor = "#555"; - } - } - } -} - -function hideSidebar() { - const sidebar = document.getElementById("sidebar"); - const progressContainer = document.getElementById("progressContainer"); - const sections = document.getElementsByTagName("section"); - - if (screen.width <= 600) { - if (window.scrollY >= 100) { - sidebar.style.left = "-80px"; - - for (var i = 0; i < sections.length; i++) { - sections[i].style.marginLeft = 0; - } - - if (progressContainer) { - progressContainer.style.left = "-11px"; - } - } - else { - sidebar.style.left = "0"; - - for (var i = 0; i < sections.length; i++) { - sections[i].style.marginLeft = "70px"; - } - - if (progressContainer) { - progressContainer.style.left = "61px"; - } - } - } - else { - sidebar.style.left = "0"; - progressContainer.style.left = "61px"; - } -} - -function isInViewport(element) { - const rect = element.getBoundingClientRect(); - const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0); - const visibleWidth = Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0); - const elementHeight = rect.height; - const elementWidth = rect.width; - const halfElementHeight = elementHeight / 2; - const halfElementWidth = elementWidth / 2; - - return ( - visibleHeight >= halfElementHeight && - visibleWidth >= halfElementWidth - ); -} - - +document.addEventListener('scroll', function () {
+ progress();
+ hideSidebar();
+});
+
+function progress() {
+ const sections = document.getElementsByTagName("section");
+ const nodes = document.getElementsByClassName("node");
+
+ if (nodes[0]) {
+ for (var i = 0; i < sections.length; i++) {
+ if (isInViewport(sections[i])) {
+ nodes[i].style.width = "22px";
+ nodes[i].style.height = "22px";
+ nodes[i].style.backgroundColor = "black";
+ }
+ else {
+ nodes[i].style.width = "13px";
+ nodes[i].style.height = "13px";
+ nodes[i].style.backgroundColor = "#555";
+ }
+ }
+ }
+}
+
+function hideSidebar() {
+ const sidebar = document.getElementById("sidebar");
+ const progressContainer = document.getElementById("progressContainer");
+ const sections = document.getElementsByTagName("section");
+
+ if (!progressContainer) {
+ return;
+ }
+
+ if (screen.width <= 600) {
+ if (window.scrollY >= 100) {
+ sidebar.style.left = "-80px";
+
+ for (var i = 0; i < sections.length; i++) {
+ sections[i].style.marginLeft = 0;
+ }
+
+ if (progressContainer) {
+ progressContainer.style.left = "-11px";
+ }
+ }
+ else {
+ sidebar.style.left = "0";
+
+ for (var i = 0; i < sections.length; i++) {
+ sections[i].style.marginLeft = "70px";
+ }
+
+ if (progressContainer) {
+ progressContainer.style.left = "61px";
+ }
+ }
+ }
+ else {
+ sidebar.style.left = "0";
+ progressContainer.style.left = "61px";
+ }
+}
+
+function isInViewport(element) {
+ const rect = element.getBoundingClientRect();
+ const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0);
+ const visibleWidth = Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0);
+ const elementHeight = rect.height;
+ const elementWidth = rect.width;
+ const halfElementHeight = elementHeight / 2;
+ const halfElementWidth = elementWidth / 2;
+
+ return (
+ visibleHeight >= halfElementHeight &&
+ visibleWidth >= halfElementWidth
+ );
+}
+
+
|