jQueryでスクロール後の固定ヘッダーのスタイルを変更する

ページを表示したときと、スクロールを開始した場合で表示スタイルを変更する方法です。
トップのビジュアルの印象をより強めたいときなどに役立ちます。
表示サンプル

Javascript

今回はBootstrapのクラスを利用して表示しているので、Bootstrapも読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>

$(document).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 1) {
        $("#header").removeClass("topHeader");
    } else {
        $("#header").addClass("topHeader");
    }
});

CSS

<link href="bootstrap.css" rel="stylesheet" type="text/css">

.topHeader{
    background-color:#EEE !important;
    border-color:#EEE !important;
}

HTML

<div id="header" class="navbar navbar-inverse navbar-fixed-top topHeader" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Project name</a>
        </div>
      </div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>スクロールでヘッダー変更</h1>
        <p>こちらのページをスクロールしてみてください。</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more »</a></p>
      </div>
</div>

参考：Add/remove class with jquery based on vertical scroll?