Skip to content

Commit c93e7b7

Browse files
committed
10-scroll-project complete
1 parent 1caf9b4 commit c93e7b7

3,301 files changed

Lines changed: 261690 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

10-scroll/final/app.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// pageYOffset is a read - only window property that returns the number of pixels the document has been scrolled vertically.
2+
// slice extracts a section of a string without modifying original string
3+
//offsetTop - A Number, representing the top position of the element, in pixels
4+
5+
// ********** set date ************
6+
// select span
7+
const date = (document.getElementById(
8+
"date"
9+
).innerHTML = new Date().getFullYear());
10+
11+
// ********** fixed navbar ************
12+
13+
const navbar = document.getElementById("nav");
14+
const topLink = document.querySelector(".top-link");
15+
16+
window.addEventListener("scroll", function () {
17+
const height = window.pageYOffset;
18+
if (height > 96) {
19+
navbar.classList.add("fixed-nav");
20+
} else {
21+
navbar.classList.remove("fixed-nav");
22+
}
23+
if (height > 500) {
24+
topLink.classList.add("show-link");
25+
} else {
26+
topLink.classList.remove("show-link");
27+
}
28+
});
29+
30+
// ********** smooth scroll ************
31+
// select links
32+
const scrollLinks = document.querySelectorAll(".scroll-link");
33+
scrollLinks.forEach((link) => {
34+
link.addEventListener("click", (e) => {
35+
// prevent default
36+
e.preventDefault();
37+
const id = e.currentTarget.getAttribute("href").slice(1);
38+
const element = document.getElementById(id);
39+
let position = element.offsetTop - 56;
40+
41+
window.scrollTo({
42+
left: 0,
43+
top: position,
44+
});
45+
});
46+
});
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
Font Awesome Free License
2+
-------------------------
3+
4+
Font Awesome Free is free, open source, and GPL friendly. You can use it for
5+
commercial projects, open source projects, or really almost whatever you want.
6+
Full Font Awesome Free license: https://fontawesome.com/license/free.
7+
8+
# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
9+
In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
10+
packaged as SVG and JS file types.
11+
12+
# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
13+
In the Font Awesome Free download, the SIL OFL license applies to all icons
14+
packaged as web and desktop font files.
15+
16+
# Code: MIT License (https://opensource.org/licenses/MIT)
17+
In the Font Awesome Free download, the MIT license applies to all non-font and
18+
non-icon files.
19+
20+
# Attribution
21+
Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
22+
Awesome Free files already contain embedded comments with sufficient
23+
attribution, so you shouldn't need to do anything additional when using these
24+
files normally.
25+
26+
We've kept attribution comments terse, so we ask that you do not actively work
27+
to remove them from files, especially code. They're a great way for folks to
28+
learn about Font Awesome.
29+
30+
# Brand Icons
31+
All brand icons are trademarks of their respective owners. The use of these
32+
trademarks does not indicate endorsement of the trademark holder by Font
33+
Awesome, nor vice versa. **Please do not use brand logos for any purpose except
34+
to represent the company, product, or service to which they refer.**

0 commit comments

Comments
 (0)