最近良く見かける、ページをスクロールするとメニューバーがページの上辺で固定されるUIですが、アレをこのブログでも実装したいと思っていろいろ調べたところ、JQueryを使えば簡単に実装が出来るみたいなので、やってみました。

まずは適用させたいCSSのクラスを用意します。このブログでは以下のクラスを対象にしました。 
.dropdown_bg{
      display:block;
      width:100%;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.92, #2e90c5), color-stop(0.47, #2e90c5), color-stop(0.00, #68AFD5));
      background: -webkit-linear-gradient(top, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
      background: -moz-linear-gradient(top, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
      background: -o-linear-gradient(top, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
      background: -ms-linear-gradient(top, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
      background: linear-gradient(to bottom, #68AFD5 0%, #2e90c5 47%, #2e90c5 92%);
      text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);
}


  続いて、ポジションを切り替えるためのfixedクラスを用意しておきます。 
.fixed{
     position: fixed;
      top: 0;
      left: 0;
}


  以下のJSソースを<head> ~ </head>に挿入します。  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      var nav = $('固定したいクラス名');
      var navTop = nav.offset().top;

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

      if (winTop >= navTop) {
        nav.addClass('fixed')
      } else if (winTop <= navTop) {
        nav.removeClass('fixed')
      }
   });
  });
</script>


 このJavaScriptは簡単に言うと、スクロールイベントを取得して、固定したいクラスがウインドウTOPにきたときに<div class="dropdown_bg">を<div class="dropdown_bg fixed">に切り替えるというものです。汎用性もかなり高いので、いろんな形で使ってみてはどうでしょうか。