固定のナビゲーションが隠れてしまう。

HTMLにjqueryとcssでフェードインのアニメーションをつけてみたのですが、
固定のナビゲーションがアニメーション後に表示されるコンテンツ（.s_animation）に隠れてしまいます。

z-indexを指定してみたのですが反応せず・・・
どのようにしたら、固定ナビが隠れないように設定できますか？

HTML
1<!--ナビゲーション-->
2<nav class="v_pc">
3   <ul>
4      <li class="h_nav"><a href="newlife_top.html">Home</a></li>
5      <li class="h_nav"><a href="newlife_news.html">News</a></li>
6　　　　　　　　　　　　　　　　　　　　　　　　・・・省略・・・
7   </ul>
8</nav>
9<!--アニメーションをつけるコンテンツ-->
10<section class="menu_box">
11   <div class="inner s_animation">
12　　　　　　　　　　　　　　　　　　　　　　　・・・省略・・・
13   </div>
14</section>

CSS
1/*アニメーション要素のスタイル*/
2.s_animation{
3	opacity : 0;
4	visibility: hidden;
5	transition: 1.6s;
6	transform: translateY(40px);
7}
8/*アニメーション要素までスクロールした時のスタイル*/
9.active_s_animetion{
10	opacity: 1;
11	visibility: visible;
12	transform: translateY(0);
13}

jQuery
1/*スライド＆フェードインのアニメーション*/
2  $(function(){
3	$(window).on('load scroll',function (){
4		$('.s_animation').each(function(){
5			//ターゲットの位置を取得
6			var target = $(this).offset().top;
7			//スクロール量を取得
8			var scroll = $(window).scrollTop();
9			//ウィンドウの高さを取得
10			var height = $(window).height();
11			//ターゲットまでスクロールするとフェードインする
12			if (scroll > target - height){
13				//クラスを付与
14				$(this).addClass('active_s_animetion');
15			}
16		});
17	});
18});