waypoints.jsを使って特定の位置までスクロールしたらメニューバーをにゅるっと出す

ヘッダーで読み込み

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.waypoints.min.js"></script>

1 2	<script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.waypoints.min.js"></script>

htmlの記述

・メニューバーのhtmlはこんな感じです

<nav class="navbar navbar-default">
  <div class="container">
    <div class="menu">
      <ul class="nav navbar-nav navbar-right">
        <li><a title="商品" href="/#products">商品</a></li>
        <li><a title="企業情報" href="/corporate">企業情報</a></li>
        <li><a title="リクルート" href="/recruit">リクルート</a></li>
        <li><a title="お問い合せ" href="/contact">お問い合わせ</a></li>
      </ul>
    </div>
  </div> <!-- /.end of container -->
</nav>

<li><a title="リクルート" href="/recruit">リクルート</a></li>

<li><a title="お問い合せ" href="/contact">お問い合わせ</a></li>

</ul>

</div>

</div>

</nav>

・ヘッダーを表示させる位置にclassを振ります。

<div id="wrapper" class="sticky_point">
<p>この位置までスクロールされたらヘッダーを表示します。</p>
</div>

<p>この位置までスクロールされたらヘッダーを表示します。</p>

</div>

jsの記述

スクロールされ.sticky_pointまできたらメニューバー.navbar-defaultに.stickyを追加し、
cssによってメニューバーを表示させたいので、以下のような記述になります。

var waypointsHideGlobal = $('.sticky_point').waypoint({
		handler: function(direction) {
      if(direction === 'down'){
				$('.navbar-default').addClass('sticky');
      }else{
      	$('.navbar-default').removeClass('sticky');
      }
		},
  	offset: '0'
	});

var waypointsHideGlobal = $('.sticky_point').waypoint({

handler: function(direction) {

if(direction === 'down'){

$('.navbar-default').addClass('sticky');

}else{

$('.navbar-default').removeClass('sticky');

}

offset: '0'

});

cssの記述

  .navbar-default {
    left: 0;
    position: fixed;
    top: 0;
    -webkit-transition: transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    width: 100%;
    background-color: rgba(255,255,255,0.8);
    border: 0;
    z-index: 3;
    padding: 0 15px;
    .navbar-nav > li > a {
   }
  }
  .navbar-default.sticky {
    transform: translateY(0);
  }