host/xiaowang
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add header bar animation and fix artworks width

Browse source
This commit is contained in:
Paul Nicoué 2022-06-01 17:31:53 +02:00
parent df70ddca09
commit a021b6443a
5 changed files with 64 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

33
assets/js/app.js
View file

@ -22,6 +22,11 @@ const circleTypes = [];
const galleryVideos = document.querySelectorAll('.gallery__video');
let videoPlayers = [];
// HEADER BAR ANIMATION //
const headerBar = document.querySelector('.header-bar');
let scrollOffset = 0;
// ----------------------------------------------------------------------------
// UTILS
// ----------------------------------------------------------------------------
@ -219,6 +224,28 @@ function toggleVideosFullScreen() {
}
}
// HEADER BAR ANIMATION //
function toggleHeaderBar() {
if (headerBar) {
let headerBarHeight = headerBar.getBoundingClientRect().height;
if (window.pageYOffset > headerBarHeight) { // Scroll down past header bar height
headerBar.classList.add('header-bar--fixed');
} else {
headerBar.classList.remove('header-bar--fixed');
headerBar.classList.remove('header-bar--visible');
}
if (headerBar.classList.contains('header-bar--fixed')) {
if (scrollOffset < window.pageYOffset) { // Scroll down
headerBar.classList.remove('header-bar--visible');
} else if (scrollOffset > window.pageYOffset) { // Scroll up
headerBar.classList.add('header-bar--visible');
}
scrollOffset = window.pageYOffset;
}
}
}
// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------
@ -240,3 +267,9 @@ window.addEventListener('load', function() {
setUpVideoPlayers();
toggleVideosFullScreen();
// HEADER BAR ANIMATION //
document.addEventListener('scroll', function() {
toggleHeaderBar();
});