<div class="wrap">
  <div class="header">
    <p>ヘッダー</p>
  </div>
  <div class="menu">
    <p>メニュー</p>
  </div>
  
  
</div>
.wrap{
  width:200px;
  margin:0 auto;
  background:#efefef;
  text-align:center;
  height:1000px;
  .header{
    background:#417505;
    padding:10px;
  }
  .menu{
    background:#7ED321;
    padding:10px;
    width:180px;
  }
  .fixed{
    position:fixed;
    top:0;
  }
  
}
//メニューのページ上部からの距離を取得
var menu_offset = $(".menu").offset().top;

$(window).scroll(
  function(){
    //現在のスクロール量を取得
    var my_offset = $(window).scrollTop();
    if(menu_offset < my_offset){
      //現在のスクロール量がメニューのページ上部からの距離を越えた場合にクラス「fixed」を付与
      $(".menu").addClass("fixed");
    } else {
      //逆の場合にクラス「fixed」を解除
      $(".menu").removeClass("fixed");      
    }
  }
)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js