javascript - スティッキー ナビゲーションバーが機能しない

Question

まず、なぜhttp://jsfiddle.net/s4eMT/が機能しないのでしょうか?

次に、jsfiddle に入れた js コードはプロジェクトで動作していますが、ブラウザのサポートに何らかの問題があります。

Chrome で Web サイトを実行すると期待どおりに動作し、ナビゲーション バーまで下にスクロールすると修正されます。Safari と Firefox で実行すると、ナビゲーション バーが固定されますが、ナビゲーション バーが小さくなり、左に浮いてしまいます。最後に言及したブラウザーでサポートされていないのは何なのかわかりません。

これが私のコードです：

HTML

<div id="navbar-wrapper">
        <div class="navbar">
            <div class="navbar-inner hidden-phone">
                <ul class="nav">
                    <li @if(page=="services"){class="active"}><a href="/services">@Messages("NavServices")</a></li>
                    <li @if(page=="work"){class="active"}><a href="/work">@Messages("NavWork")</a></li>
                    <li class="logo hidden-phone"><a href="/"><img src="@routes.Assets.at("images/HF_logo_inverted.png")" class="img-circle" alt="Home" /></a></li>
                    <li @if(page=="wall"){class="active"}><a href="/wall">@Messages("NavWall")</a></li>
                    <li @if(page=="contact"){class="active"}><a href="/contact">@Messages("NavContact")</a></li>
                </ul>
            </div>
            <div class="navbar-inner visible-phone">
                <ul class="nav phone-only">
                    <li @if(page=="services"){class="active"}><a href="/services">@Messages("NavServices")</a></li>
                    <li @if(page=="work"){class="active"}><a href="/work">@Messages("NavWork")</a></li>
                </ul>
                <ul class="nav phone-only">
                    <li @if(page=="wall"){class="active"}><a href="/wall">@Messages("NavWall")</a></li>
                    <li @if(page=="contact"){class="active"}><a href="/contact">@Messages("NavContact")</a></li>
                </ul>
            </div>
           <div id="language" class="hidden-phone">
                <a href="@if(page!="index"){/@page}else{/}"><img src="@routes.Assets.at("images/gb.png")" /></a>&nbsp;&nbsp;
                <a href="#"><img src="@routes.Assets.at("images/se.png")" /></a>&nbsp;&nbsp;
             </div>
        </div>
    </div>

CSS

#navbar-wrapper {
  position: relative;
  min-width: 100%;
  border:1px solid red;
}

ジャバスクリプト

 $(document).ready(function () {
  var stickyNavTop = $('#navbar-wrapper').offset().top;

  var stickyNav = function () {
      var scrollTop = $(window).scrollTop();

      if (scrollTop > stickyNavTop) {
          $('#navbar-wrapper').css({
              'position': 'fixed',
                  'top': '0'
          });
          alert('afa');
      } else {
          $('#navbar-wrapper').css({
              'position': 'relative'
          });
      }
  };

  stickyNav();

  $(window).scroll(function () {
      stickyNav();
  });
});

私は何が欠けていますか？

よろしく、