jQuery5(スティッキーの作成：基本)

jQuery
2017.10.28

ナビゲーションの常時表示などに使われるスティッキーを作成してみよう。

準備

1.以下のファイルをダウンロードし、好きな場所に解凍する。

アイコン

jQueryTemplate

1 ファイル 109.82 KB
Template.zip

2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成である。これを複製していくことによって新しいプロジェクトを作成する。Templateフォルダを複製しフォルダ名をLesson05としよう。
3.以下の画像をダウンロードし、imagesフォルダに保存する。

4.index.htmlを以下のように編集する。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>タイトル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div id="container">
    <header><img src="images/slide-1.jpg"></header>
    <div id="navBox">
      <div id="logo"><a href="#">joytas.net</a></div>
      <ul>
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
        <li><a href="#">Menu4</a></li>
      </ul>
    </div>
    <main>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </main>
    <footer>
      &copy;joytas.net
    </footer>
  </div>
  <script src="js/vendor/jquery-1.12.4.min.js"></script>
  <script src="js/vendor/jquery-ui-1.12.1.min.js"></script>
  <script src="js/vendor/jquery.easing.1.3.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

5.main.cssを以下のように編集

#container{
  position: relative;
  width:960px;
  margin:0 auto;
}
header img{
  /*画像の下部に隙間が出るのをfix*/
  display: block;
}
#navBox{
  width:960px;
  box-sizing: border-box;
  /*absoluteにして、top,leftなどの指定をしないとその場所に絶対配置される*/
  position: absolute;
  height:50px;
  background:#333;
  color:white;
  padding:0 50px;
}
/*動的にstickyクラスを付与することで固定要素にするtopの基準は画面*/
#navBox.sticky{
  position:fixed;
  top:0;
}
#navBox #logo{
  margin: 0;
  font-size:20px;
  font-weight: bold;
  float:left;
}
#navBox #logo a{
  text-decoration: none;
  line-height:50px;
  color:#eee;
}
#navBox ul{
  float:right;
}
#navBox ul li{
  display: inline-block;
  margin-right:30px;
}

#navBox ul li a{
  color:white;
  text-decoration: none;
}
#navBox ul li a:hover{
  text-decoration: underline;
}
main{
  background: #ddd;
  padding:70px 50px 50px;
}

main p{
  margin-bottom:50px;
}
footer{
  background: #333;
  color:#ddd;
  text-align: center;
  line-height: 40px;
  height:40px;
}

6.main.jsを以下のように編集する。

$(function(){
  //windowオブジェクトをjQueryにしてキャッシュ
  var $window=$(window);
  //navBoxオブジェクトをjQueryにしてキャッシュ
  var $navBox=$('#navBox');
  //offset().topでドキュメントの上からの距離を取得
  var headerOffsetTop=$navBox.offset().top;
  //スクロールが発生したら
  $window.on('scroll',function(){
    //スクロール位置がオフセットより大きくなったら
    if($window.scrollTop()>headerOffsetTop){
      //クラスを付与
      $navBox.addClass('sticky');
    }else{
      //クラスを削除
      $navBox.removeClass('sticky');
    }
  });
  //リロードした時などのために読み込みと同時に一度擬似的にイベントをコールしておく
  $window.trigger('scroll');
});

7.実行してみよう。スクロールして画面上部にナビが固定されれば成功だ。

スポンサーリンク

コメント

タイトルとURLをコピーしました