Demo

 demo

html & css


htmlです。
html
   
 <h1><a href="#">タイトル</a></h1>
 <div class="nav">
  <ul class="clearfix">
   <li><a href="#">HOME</a></li>
   <li><a href="#">ABOUT</a></li>
   <li><a href="#">NEWS</a></li>
   <li><a href="#">LINK</a></li>
  </ul>
 <!-- /#nav --></div>
 <div id="article">
  ・・・
 <!-- /#article --></div>

ナビゲーション部分のcssはこんな感じです。
css
   
 .nav {
  padding: 0 20px;
  margin: 0 auto 60px;
  width: 760px;
  font-size: 85%;
  background: #555;
 }
 .nav li {
  list-style: none;
  float: left;
 }
 .nav li a {
  text-decoration: none;
  color: #fff;
  padding: 8px 12px;
  display: block;
 }
 .nav li a:hover {
  background: #666;
 }
 .fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
 }

jQueryでは﹁.fixed﹂クラスを追加したり削除するだけなので、﹁<div class="nav">﹂で通常のナビゲーション表示で、﹁<div class="nav fixed">﹂で上部に固定されるようにcssを設定しておきます。  

jQuery


﹁$(window).scroll﹂はスクロールするたびに実行されるイベントなので、この中でナビゲーションが現在の位置より上か下かの条件分岐をすればいいだけです。
javascript
   
 <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 = $('.nav');
  //navの位置 
  var navTop = nav.offset().top;
  //スクロールするたびに実行
  $(window).scroll(function () {
   var winTop = $(this).scrollTop();
   //スクロール位置がnavの位置より下だったらクラスfixedを追加
   if (winTop >= navTop) {
    nav.addClass('fixed')
   } else if (winTop <= navTop) {
    nav.removeClass('fixed')
   }
  });
 });
 </script>


プルダウンメニューをつける


プルダウンメニューはいろいろプラグインがあると思いますので、普通につけてもらえればいけると思います。
  一応簡単なものですが載せておきます。  
demo
javascript
   
 $(function() {
  var nav = $('.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')
   }
  });
  //サブナビゲーション
  $('li', nav).hover(function(){
   $('ul',this).slideDown('fast');
  },
  function(){
   $('ul',this).slideUp('fast');
  });
 });



その他スクロール関係の記事はこちらもどうぞ
jQueryでスクロールすると表示する系いろいろ