forked from john-smilga/javascript-basic-projects
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.js
More file actions
77 lines (61 loc) · 2.41 KB
/
app.js
File metadata and controls
77 lines (61 loc) · 2.41 KB
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
// 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')
const navbar = document.getElementById('nav')
const topLink = document.querySelector('.top-link')
const scrollLinks = document.querySelectorAll('.scroll-link')
navToggle.addEventListener('click', function () {
//linksContainer.classList.toggle("show-links");
const containerHeight = linksContainer.getBoundingClientRect().height
const linksHeight = links.getBoundingClientRect().height
containerHeight === 0
? (linksContainer.style.height = `${linksHeight}px`)
: (linksContainer.style.height = 0)
})
// ********** fixed navbar ************
window.addEventListener('scroll', function () {
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
scrollLinks.forEach(function (link) {
link.addEventListener('click', function (e) {
e.preventDefault()
const id = e.currentTarget.getAttribute('href').slice(1)
const element = document.getElementById(id)
const navHeight = navbar.getBoundingClientRect().height
const containerHeight = linksContainer.getBoundingClientRect().height
const fixedNav = navbar.classList.contains('fixed-nav')
let position = element.offsetTop - navHeight
if (!fixedNav) {
position = position - navHeight
}
if (navHeight > 82) {
position = position + containerHeight
}
window.scrollTo({
left: 0,
top: position,
})
linksContainer.style.height = 0
})
})