title: Jquery: Using scrollTop to make animated sticky menu
body: <p>I'm trying to create an animated sticky menu.</p>
  
  <p>User loads up the page and the  navigation is stationary. User then scrolls down the page and after like 500 pixels (scrolling over the original navigation), the navigation animates into the page stuck to the top using fixed positioning.</p>
  
  <p>I have it working now (see codepen: <a href="http://codepen.io/chrisyerkes/pen/uoFKl" rel="nofollow">http://codepen.io/chrisyerkes/pen/uoFKl</a>) however, once I scroll back up and it resets the menu's position, the next time I scroll down the page, it no longer animates in, just snaps into place. I want it to animate down like it does on the first page load/scroll action.</p>
  
  <p>It looks like the attribute style="top: 0px" doesn't get removed when you scroll back up the page which may be causing the problem. I tried using removeAttr() to get rid of it on return scroll, but it keeps popping back in whenever it is removed (automatically).</p>
  
  <p>Any ideas would be really appreciated. thank you!</p>