Difference between revisions of "Template:NCTU Formosa/test"
| Line 735: | Line 735: | ||
</div> | </div> | ||
| + | |||
| + | {{NCTU Formosa/Scroll_nav}} | ||
<html> | <html> | ||
| Line 768: | Line 770: | ||
height:10vmin; | height:10vmin; | ||
z-index:999; | z-index:999; | ||
| + | transition: top 0.4s ease-in-out; | ||
| + | } | ||
| + | |||
| + | .hideUp .main-container { | ||
| + | top: -80px; | ||
| + | } | ||
| + | |||
| + | .hideUp .nav { | ||
| + | top: -80px; | ||
} | } | ||
| Line 1,040: | Line 1,051: | ||
box-shadow: 0px -3px 18px 0px; | box-shadow: 0px -3px 18px 0px; | ||
z-index: 999; | z-index: 999; | ||
| + | transition: top 0.4s ease-in-out; | ||
} | } | ||
| Line 1,684: | Line 1,696: | ||
}); | }); | ||
| + | var bodyClass = document.body.classList, | ||
| + | lastScrollY = 0; | ||
| + | window.addEventListener('scroll', function(){ | ||
| + | var st = this.scrollY; | ||
| + | // 判斷是向上捲動，而且捲軸超過 200px | ||
| + | if( st < lastScrollY) { | ||
| + | bodyClass.remove('hideUp'); | ||
| + | }else{ | ||
| + | bodyClass.add('hideUp'); | ||
| + | } | ||
| + | lastScrollY = st; | ||
| + | }); | ||
</script> | </script> | ||
</html> | </html> | ||
Revision as of 17:28, 7 October 2018
