Fixed parallax effect and active menu item.
This commit is contained in:
parent
20e72cd32c
commit
827f6cb876
1 changed files with 30 additions and 0 deletions
|
|
@ -1,4 +1,34 @@
|
|||
window.addEventListener('scroll', () =>
|
||||
{
|
||||
// Add class to body when scrolled.
|
||||
document.body.classList.toggle('is-scrolled', window.scrollY > 0);
|
||||
|
||||
// Parallax effect.
|
||||
/**
|
||||
* @type {HTMLVideoElement}
|
||||
*/
|
||||
const heroVid = document.querySelector('.hero video');
|
||||
heroVid.style.top = `${window.scrollY / 3}px`;
|
||||
|
||||
// Highlight menu item when scrolled to section.
|
||||
let current = '';
|
||||
document.querySelectorAll('.section').forEach(section =>
|
||||
{
|
||||
const sectionTop = section.offsetTop;
|
||||
|
||||
if (window.scrollY >= sectionTop - 70)
|
||||
{
|
||||
current = section.getAttribute('id');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.nav-link').forEach(link =>
|
||||
{
|
||||
link.classList.remove('active');
|
||||
|
||||
if (link.getAttribute('href') === `#${current}`)
|
||||
{
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue