スクロール時にヘッダーにクラス追加

スクロールしたらヘッダーにクラスを振るコード

$(function () {
  var headerBar = $('header');
  $(window).scroll(function () {
    hsize = $('header').height();
    if ($(this).scrollTop() > hsize) {
      headerBar.addClass('scroll');
    } else {
      headerBar.removeClass('scroll');
    }
  });
});

スクロールしたら上からピョコってでてくる固定ヘッダー

$(function () {
  var flag = false;
  var headerBar = $('header');
  $(window).scroll(function () {
    hsize = $('header').height();
    if ($(this).scrollTop() > hsize) {
      if (flag == false) {
        flag = true;
        headerBar.addClass('scroll');
        $('.scroll').css({'top': -hsize});
        $('.scroll').animate({'top': '0px'}, 700);
      }
    } else {
      if (flag == true) {
        flag = false;
        headerBar.removeClass('scroll');
      }
    }
  });
});

さっきと違うのは、条件分岐が1つ増えたことくらい。
スクロール値がヘッダーの高さを超えたらcss「top」で上からアニメーションしながら降りてくるやつです。

flagの条件分岐がないと固定ヘッダーの挙動がスクロールするごとに点滅するので入れてます。
たぶんflagで真偽判定ないとスクロールするたびにcss「top」の部分が動いちゃうんだろうと…