35/365: Scroll Events

 The bonus challenge for this sample portfolio assignment was to animate the header so that it smoothy hides itself when you scroll down then comes back when you scroll up. A lot of web apps do this. In order to do that, the transform style prop of the header is rendered conditionally based on same statelike data that says if the user is scrolling up or down? How do we get such data? Other students and the instructors use a scroll event solution, where a listener is added to the window. Upon a scroll, the Y value of the scroll is extracted from the event object, and compared to the prior Y value to deduce arithmetically if the user scrolled up or down. I found a much simpler solution using the wheel event. These events have a property called deltaY which lets me simple see the change in Y from the scroll and determine directly if the scroll was up or down. This simplifies the code and reduces the amount of state required to get the desired UI.