xavi
/
hermit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix behaviour of auto-hide header (#78) 

Fixed #76: 
On mobile environment (iOS Safari), when the page scrolls to the top then bounce back, the header (bottom bar) turns to hide unexpectedly. Fixed it by forcing `currentScrollPosition` not a negative value.
This commit is contained in:
Akio Taniguchi 2019-06-22 18:27:00 +09:00 committed by Track3
parent 6cee5adc69
commit c2e02c5dff
3 changed files with 1 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/js/main.js
View File

@ -34,7 +34,7 @@ let header = document.getElementById('site-header');
let lastScrollPosition = window.pageYOffset;
const autoHideHeader = () => {
let currentScrollPosition = window.pageYOffset;
let currentScrollPosition = Math.max(window.pageYOffset, 0);
if (currentScrollPosition > lastScrollPosition) {
header.classList.remove('slideInUp');
header.classList.add('slideOutDown');

9
resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.content
View File

@ -1,9 +0,0 @@
const throttle=(callback,limit)=>{let timeoutHandler=null;return()=>{if(timeoutHandler==null){timeoutHandler=setTimeout(()=>{callback();timeoutHandler=null;},limit);}};};const listen=(ele,e,callback)=>{if(document.querySelector(ele)!==null){document.querySelector(ele).addEventListener(e,callback);}}
let header=document.getElementById('site-header');let lastScrollPosition=window.pageYOffset;const autoHideHeader=()=>{let currentScrollPosition=window.pageYOffset;if(currentScrollPosition>lastScrollPosition){header.classList.remove('slideInUp');header.classList.add('slideOutDown');}else{header.classList.remove('slideOutDown');header.classList.add('slideInUp');}
lastScrollPosition=currentScrollPosition;}
let mobileMenuVisible=false;const toggleMobileMenu=()=>{let mobileMenu=document.getElementById('mobile-menu');if(mobileMenuVisible==false){mobileMenu.style.animationName='bounceInRight';mobileMenu.style.webkitAnimationName='bounceInRight';mobileMenu.style.display='block';mobileMenuVisible=true;}else{mobileMenu.style.animationName='bounceOutRight';mobileMenu.style.webkitAnimationName='bounceOutRight'
mobileMenuVisible=false;}}
const showImg=()=>{document.querySelector('.bg-img').classList.add('show-bg-img');}
const hideImg=()=>{document.querySelector('.bg-img').classList.remove('show-bg-img');}
const toggleToc=()=>{document.getElementById('toc').classList.toggle('show-toc');}
if(header!==null){listen('#menu-btn',"click",toggleMobileMenu);listen('#toc-btn',"click",toggleToc);listen('#img-btn',"click",showImg);listen('.bg-img',"click",hideImg);document.querySelectorAll('.post-year').forEach((ele)=>{ele.addEventListener('click',()=>{window.location.hash='#'+ele.id;});});window.addEventListener('scroll',throttle(()=>{autoHideHeader();if(mobileMenuVisible==true){toggleMobileMenu();}},250));}

1
resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.json
View File

@ -1 +0,0 @@
{"Target":"js/main.min.784417f5847151f848c339cf0acb13a06cbb648b1483435a28ed4556c4ead69b.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-eEQX9YRxUfhIwznPCssToGy7ZIsUg0NaKO1FVsTq1ps="}}