On Scroll, Trigger Event At The Same Time While Hiding Scroll Bar And Hiding Overflow

I'm trying to make a website similar to this http://www.grannyssecret.com (just the landing page). if you go there and scroll up, hidden footer appears smoothly, then if you scroll

Solution 1:

Try to use "wheel" event instead of "scroll".

document.getElementsByTagName("body")[0].addEventListener("wheel",  function () {
//your code here
});

Please find your refactored fiddle: https://jsfiddle.net/mp0a6Ln6/