title: on scroll, trigger event at the same time while hiding scroll bar and hiding overflow
body: <p>I'm trying to make a website similar to this <a href="http://www.grannyssecret.com" rel="nofollow">http://www.grannyssecret.com</a> (just the landing page).</p>
  
  <p>if you go there and scroll up, hidden footer appears smoothly, then if you scroll down again the footer goes down.</p>
  
  <p>my HTML file can imitate the same thing when I click the button, but it doesn't work when I try to animate footer by scrolling a mouse wheel.</p>
  
  <p>the problem is that scrolling event is firing multiple times.
  also, when overflow is set to hidden scrolling event doesn't fire.</p>
  
  <p>Any idea to work my way around this problem?</p>
  
  <p>I can't seem to use jquery on <code>jsfiddle https://jsfiddle.net/vd6qgLL2/3/</code></p>