hide and show header when scrolling with js and css3

Step1:
the header should get an id.

html

Style the html

css

The header should be fixed at the top of the page.

Set two situation:
1.When scrolldown, the header slide up with transition.
2.When scrollup, the header slide down with transition.

Step2:
Javascript

js

scroll_position: current position
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.