From c2e02c5dff0ce5372ec81767c9224054a05a0002 Mon Sep 17 00:00:00 2001 From: Akio Taniguchi Date: Sat, 22 Jun 2019 18:27:00 +0900 Subject: [PATCH] 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. --- assets/js/main.js | 2 +- .../js/main.js_d11fe7b62c27961c87ecd0f2490357b9.content | 9 --------- .../js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.json | 1 - 3 files changed, 1 insertion(+), 11 deletions(-) delete mode 100644 resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.content delete mode 100644 resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.json diff --git a/assets/js/main.js b/assets/js/main.js index 5f0a47c..d18cbaa 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -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'); diff --git a/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.content b/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.content deleted file mode 100644 index 26f635c..0000000 --- a/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.content +++ /dev/null @@ -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));} \ No newline at end of file diff --git a/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.json b/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.json deleted file mode 100644 index e81b6bb..0000000 --- a/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.json +++ /dev/null @@ -1 +0,0 @@ -{"Target":"js/main.min.784417f5847151f848c339cf0acb13a06cbb648b1483435a28ed4556c4ead69b.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-eEQX9YRxUfhIwznPCssToGy7ZIsUg0NaKO1FVsTq1ps="}} \ No newline at end of file