hide and show header when scrolling with js and css3
Step1:
the header should get an id.
html |
css |
Set two situation:
1.When scrolldown, the header slide up with transition.
2.When scrollup, the header slide down with transition.
Step2:
Javascript
js |
last_scroll_position: the new position after scrolling
Explain the though:
When windows hear the scroll, there would be lauch a function which is a if...else if .
If the distance of scrollY bigger than the current number and bigger than 60, the header should be romove the slideDown classname and add the slideUp classname.
If the distance of scrollY smaller than the cutrrent number which means scroll up,the header should be romove the slideUp classname and add the slideDown classname.
Then the last position of scrollY should be given to the current scroll position for next scrolling movement.