CSSとJSでスクロールすると上部固定になるメニューを作る

もともとfixedしてない通常のメニューを対応させる想定です。

参考：CSSとJSで、スクロールして一定の場所を過ぎると、上部固定するメニューを作る

JavaScript

<script>

  jQuery(function() {
    var nav = jQuery('#sub-nav');　//固定したいDivのIDを入力

    // メニューのtop座標を取得する
    var offsetTop = nav.offset().top;

    var floatMenu = function() {
      // スクロール位置がメニューのtop座標を超えたら固定にする
      if (jQuery(window).scrollTop() > offsetTop) {
        nav.addClass('fixed');
      } else {
        nav.removeClass('fixed');
      }
    }
    jQuery(window).scroll(floatMenu);
    jQuery('body').bind('touchmove', floatMenu);
  });

</script>

CSS

<style>
    .fixed {
      position: fixed;
      top: 100px;　//一番上なら0pxに指定してください
      z-index: 1;
      background: white;　//不要であればいらないです
      width: 100%;
    }

  </style>

HTML

<!-- sub  ================================================== -->
    <div id="sub-nav">
      <div class="container">
        <ul class="nav nav-pills inline-block">
          <li class="active"><a href="http://free.aipo.com/">ダウンロード</a></li>
          <li><a href="http://free.aipo.com/install.html">インストール手順</a></li>
          <li><a href="http://free.aipo.com/update.html">アップデートプログラム</a></li>
          <li><a href="http://free.aipo.com/patch.html">パッチプログラム</a></li>
        </ul>
      </div>
    </div>