Swipeナビゲーション

サンプル
http://mycoderepository.org/app/navi_swipe_slideup/

html

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="swiper.min.css">

    <!-- スマホ対応 -->
    <meta name="viewport" content="width=device-width">
  </head>

  <body>
    <div class="wrapper">
      <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="active swiper-slide">Music</div>
            <div class="swiper-slide">Movie</div>
            <div class="swiper-slide">Art</div>
            <div class="swiper-slide">Sports</div>
            <div class="swiper-slide">Nightlife</div>
        </div>
      </div>
    </div>

    <div class="contents">
      <div class="content active">
        <p>Music</p>
      </div>

      <div class="content">
        <p>Movie</p>
      </div>

      <div class="content">
        <p>Art</p>
      </div>

      <div class="content">
        <p>Sports</p>
      </div>

      <div class="content">
        <p>Nightlife</p>
      </div>

    </div>

    <script src="http://goo.gl/1yIJUX"></script>
    <script src="app.js"></script>
    <script type='application/javascript' src='fastclick.js'></script>

    <!-- Swiper JS -->
    <script src="swiper.min.js"></script>

  </body>

</html>

style.css

body{
  margin: 0px;
  position: absolute;
}

/*------------navi------------*/

.wrapper{
  position: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
}

.wrapper .swiper-wrapper .active{
  color:grey;
}

.wrapper .swiper-container{
  width: 100%;
  height: 70px;
  text-align: center;
  line-height: 70px;
  font-size: 20px;
  background-color: yellow;
}

.wrapper .swiper-slide{
  width: 750px;
  height: 50px;
  background-color: yellow;
  cursor:pointer;
}

/*------------content------------*/

.contents{
  position: relative;
  top:50px;
}

.contents .active{
  display: block;
}

.content{
  display: none;
  height:1000px;
  padding: 10px;
}</pre> 

app.js

var main=function(){

  // クリック
  FastClick.attach(document.body);

  $('.swiper-slide').click(function(){

    // navi
    $('.swiper-slide').removeClass('active');
    $(this).addClass('active');

    // content
    $('.content').removeClass('active');
    var target = $('.swiper-slide').index(this);
    $('.content').eq(target).addClass('active');

  });

  // swiper
  var mySwiper = $('.swiper-container').swiper({
    //オプションをここに:
    mode:'horizontal',
    // loop: true ,
    slidesPerView: 3 ,
    centeredSlides: false ,
    freeMode: true
  });

  // navi slideUp&Down
  var menuHeight = $("#menu-wrap").height();
  var startPos = 0;

  $(window).scroll(function(){
    var currentPos = $(this).scrollTop();

    // スクロール確認
    if(Math.abs(currentPos-startPos)>=50){
      // スクロールの方向確認
      if(currentPos>startPos){
        $('.swiper-container').slideUp('fast');
      } else {
        $('.swiper-container').slideDown('fast');
      }
      // startPos更新
      startPos=currentPos;
    }
  });
}

$(document).ready(main)

swiper.min.css

以下からダウンロード
http://www.idangero.us/swiper/#.VYkSkPmqqko

swiper.min.js

以下からダウンロード
http://www.idangero.us/swiper/#.VYkSkPmqqko

fastclick.js

以下からダウンロード
https://github.com/ftlabs/fastclick/tree/master/lib