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

Edit header navigation bar and menu

Browse source
This commit is contained in:
Paul Nicoué 2022-06-12 12:31:03 +02:00
parent 64ad7b3a70
commit 361fd8fd3f
6 changed files with 52 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

11
assets/js/app.js
View file

@ -21,12 +21,14 @@ let videoPlayers = [];
// HEADER BAR ANIMATION //
const headerBar = document.querySelector('.header-bar');
const headerLogo =document.querySelector('.header-bar__logo');
let scrollOffset = 0;
// NAVIGATION MENU ANIMATION //
const headerNavBtn = document.querySelector('.header-bar__nav-button');
const headerNavMenu = document.querySelector('.header-bar__nav-menu');
const headerNavOverlay = document.querySelector('.header-bar__nav-overlay');
const touchPosition = {
initialX: null,
initialY: null
@ -233,12 +235,14 @@ function toggleVideosFullScreen() {
// Toggle header bar depending on scroll offset
function toggleHeaderBar() {
if (headerBar) {
if (headerBar && headerLogo) {
let headerBarHeight = headerBar.getBoundingClientRect().height;
if (window.pageYOffset > headerBarHeight) { // Scroll down past header bar height
headerBar.classList.add('header-bar--fixed');
headerLogo.classList.add('header-bar__logo--small');
} else if (window.pageYOffset <= 0) {
headerBar.classList.remove('header-bar--fixed');
headerLogo.classList.remove('header-bar__logo--small');
headerBar.classList.remove('header-bar--visible');
}
if (headerBar.classList.contains('header-bar--fixed')) {
@ -259,6 +263,7 @@ function toggleHeaderNav() {
if (headerNavBtn && headerNavMenu) {
headerNavBtn.classList.toggle('header-bar__nav-button--custom-focus');
headerNavMenu.classList.toggle('header-bar__nav-menu--visible');
headerNavOverlay.classList.toggle('header-bar__nav-overlay--visible');
document.body.classList.toggle('body--hidden-overflow-y');
}
}
@ -268,6 +273,7 @@ function closeHeaderNav() {
if (headerNavBtn && headerNavMenu) {
headerNavBtn.classList.remove('header-bar__nav-button--custom-focus');
headerNavMenu.classList.remove('header-bar__nav-menu--visible');
headerNavOverlay.classList.remove('header-bar__nav-overlay--visible');
document.body.classList.remove('body--hidden-overflow-y');
}
}
@ -282,6 +288,9 @@ function closeHeaderNavOnClick() {
document.addEventListener('click', function(e) {
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && !headerNavBtn.contains(e.target) && !headerNavMenu.contains(e.target)) {
closeHeaderNav(e);
if (e.cancelable) {
e.preventDefault();
}
}
});
}