-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
54 lines (43 loc) · 1.38 KB
/
main.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
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-link');
const navLinks = document.querySelectorAll('.nav-link li');
// add home link to drowdown menu
let newNavLink = document.createElement('li');
let newInnerText = document.createTextNode('home');
newNavLink.style.opacity = '1';
newNavLink.style.cursor = 'pointer';
newNavLink.style.transform = 'scale(1)';
newNavLink.appendChild(newInnerText);
nav.insertBefore(newNavLink, nav.childNodes[0]);
//set href of home link to top of page
newNavLink.addEventListener('click', function () {
window.scrollTo(0, 0);
})
burger.addEventListener('click', function () {
//toggle nav
nav.classList.toggle('nav-active');
//animate links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
//fixed sticky nav background on scroll
let topnav = document.getElementById('topnav');
let sticky = topnav.offsetTop;
const stickyTopnav = () => {
if (window.pageYOffset > sticky) {
topnav.classList.add('sticky');
} else {
topnav.classList.remove('sticky');
}
}
window.onscroll = stickyTopnav;