Commit 5af1ba3
committed
additional changes to scroll project
1 parent 0db1062 commit 5af1ba3
2 files changed
Lines changed: 6 additions & 5 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -1,5 +1,4 @@ | |||
| 1 | 1 | // Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport. | |
| 2 | - | ||
| 3 | 2 | // pageYOffset is a read - only window property that returns the number of pixels the document has been scrolled vertically. | |
| 4 | 3 | // slice extracts a section of a string without modifying original string | |
| 5 | 4 | //offsetTop - A Number, representing the top position of the element, in pixels | |
@@ -33,8 +32,9 @@ const navbar = document.getElementById("nav"); | |||
| 33 | 32 | const topLink = document.querySelector(".top-link"); | |
| 34 | 33 | ||
| 35 | 34 | window.addEventListener("scroll", function () { | |
| 36 | - const height = window.pageYOffset; | ||
| 37 | - if (height > 96) { | ||
| 35 | + const scrollHeight = window.pageYOffset; | ||
| 36 | + const navHeight = navbar.getBoundingClientRect().height; | ||
| 37 | + if (scrollHeight > navHeight) { | ||
| 38 | 38 | navbar.classList.add("fixed-nav"); | |
| 39 | 39 | } else { | |
| 40 | 40 | navbar.classList.remove("fixed-nav"); | |
@@ -57,7 +57,7 @@ scrollLinks.forEach((link) => { | |||
| 57 | 57 | // navigate to specific spot | |
| 58 | 58 | const id = e.currentTarget.getAttribute("href").slice(1); | |
| 59 | 59 | const element = document.getElementById(id); | |
| 60 | - // calculate heights | ||
| 60 | + | ||
| 61 | 61 | const navHeight = navbar.getBoundingClientRect().height; | |
| 62 | 62 | const containerHeight = linksContainer.getBoundingClientRect().height; | |
| 63 | 63 | const fixedNav = navbar.classList.contains("fixed-nav"); | |
@@ -69,6 +69,7 @@ scrollLinks.forEach((link) => { | |||
| 69 | 69 | if (navHeight > 82) { | |
| 70 | 70 | position = position + containerHeight; | |
| 71 | 71 | } | |
| 72 | + | ||
| 72 | 73 | window.scrollTo({ | |
| 73 | 74 | left: 0, | |
| 74 | 75 | top: position, | |
@@ -77,3 +78,4 @@ scrollLinks.forEach((link) => { | |||
| 77 | 78 | linksContainer.style.height = 0; | |
| 78 | 79 | }); | |
| 79 | 80 | }); | |
| 81 | + // calculate heights | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -1,5 +1,4 @@ | |||
| 1 | 1 | // Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport. | |
| 2 | - | ||
| 3 | 2 | // pageYOffset is a read - only window property that returns the number of pixels the document has been scrolled vertically. | |
| 4 | 3 | // slice extracts a section of a string without modifying original string | |
| 5 | 4 | //offsetTop - A Number, representing the top position of the element, in pixels | |
0 commit comments