jQueryを使ったナビゲーションバーの挙動がおかしい

Question

実現したいこと：

スクロールに伴うナビゲーションバーの挙動にしたい

問題点：

最初からナビゲーションバーが固定になっており、
少しスクロールすると、ナビゲーションバーの上部パーツ分の空間が開いてしまう。

参考：

jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5

<div id="grLabel">...</grLabel> <!--参考サイトの<header>に当たる-->
<div id="header">...</header> <!--参考サイトの<nav>に当たる-->
<div id="header_cover">...</hCover> <!--参考サイトの<main>に当たる-->

<script>
	$(function() {
  var $win = $(window),
      $header = $('#header'),
      $hCover = $('#header_cover'),
      headerHeight = $header.outerHeight(),
      headerPos = $header.offset().top,
      fixedClass = 'is-fixed';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > headerPos ) {
      $header.addClass(fixedClass);
      $hCover.css('margin-top', headerHeight);
    } else {
      $header.removeClass(fixedClass);
      $hCover.css('margin-top', '0');
    }
  });
});
</script>

参考サイトと同じになるように書き換えたつもりですが、
参考サイトのDemoのように、ナビゲーションバーが動いてくれません。

ほかのプログラムが邪魔している可能性もあります。

Comments

[hatena19]

現象の再現できるHTMLとCSSコードを提示してください。

Answer 1

他ファイルのCSSに#header{position:fixed;}の記述があり、それが邪魔をしておりました。