-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
82 lines (71 loc) · 2.81 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
// pageYOffset is a read - only window property that returns the number of pixels the document has been scrolled vertically.
// slice extracts a section of a string without modifying original string
// offsetTop - A Number, representing the top position of the element, in pixels
// ********** set date ************
const date = document.getElementById("date")
date.innerHTML = new Date().getFullYear()
// ********** close links ************
const navToggle = document.querySelector(".nav-toggle")
const linksContainer = document.querySelector(".links-container")
const links = document.querySelector(".links")
navToggle.addEventListener("click", function () {
// linksContainer.classList.toggle("show-links")
const containerHeight = linksContainer.getBoundingClientRect().height
// console.log(containerHeight)
const linksHeight = links.getBoundingClientRect().height
// console.log(linksHeight)
if (containerHeight === 0) {
linksContainer.style.height = `${linksHeight}px`
} else {
linksContainer.style.height = 0
}
})
// ********** fixed navbar ************
const navbar = document.getElementById("nav")
const topLink = document.querySelector(".top-link")
window.addEventListener("scroll", function () {
// console.log(window.pageYOffset)
const scrollHeight = window.pageYOffset
const navHeight = navbar.getBoundingClientRect().height
if (scrollHeight > navHeight) {
navbar.classList.add("fixed-nav")
} else {
navbar.classList.remove("fixed-nav")
}
if (scrollHeight > 500) {
topLink.classList.add("show-link")
} else {
topLink.classList.remove("show-link")
}
})
// ********** smooth scroll ************
// select links
const scrollLinks = document.querySelectorAll(".scroll-link")
scrollLinks.forEach(function (link) {
link.addEventListener("click", function (e) {
// prevent default
e.preventDefault()
// navigate to specific spot
const id = e.currentTarget.getAttribute("href").slice(1)
// console.log(id)
const element = document.getElementById(id)
// calculate the heights
const navHeight = navbar.getBoundingClientRect().height
const containerHeight = linksContainer.getBoundingClientRect().height
const fixedNav = navbar.classList.contains("fixed-nav")
let position = element.offsetTop - navHeight
// console.log(position)
if (!fixedNav) {
position = position - navHeight
}
if (navHeight > 82) {
position = position + containerHeight
}
window.scrollTo({
left: 0,
top: position,
})
linksContainer.style.height = 0;
})
})