JQuery Scrolling and Some Not So Hidden Headings

I'm trying to produce a fixed-position header that appears once the user starts scrolling through the page. I'm using JQuery (on a page that also uses Angular) and wanted to fadeIn once the scrollTop is > 250px and disappears immediately (I've been using display: none) the moment it's < 250px.

When scrolling slowly my code works but when scrolling up and down at speed the h1 that should be hidden reappears above the 250px mark: https://jsfiddle.net/gilestaylor/jpaqbm36/

Can anyone recommend a fix? Or else a smarter way of doing this? (I'm still learning the ropes so any tips much appreciated!)

HTML
<header>
  <h1>Order some food</h1>
</header>
<div id="bar">
 <h1>Order some food</h1>
</div>

JS
$(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() > 250) {
      $('#bar').css({
        'height': '50px'
      });
    $('#bar h1').fadeIn(1000);          
    }
    else {
        $('#bar').css({
            'height': '0'
        });
        $('#bar h1').css({'display': 'none'});
    };
  });
});