上にスクロールして要素が画面のTOPに来たら固定させるメニューを作成

上や下にメニューを固定するとユーザに効果的にメニューを見せることができるが、ずっと上や下に固定でメニューにあると表示エリアが少なくなるため、上にスクロールして画面のTOPに来たらTOPに固定させるメニューは下記のように作成することができる

今回はJqueryは使用しない

メニューの部分のCSSは以下の通り。最初は非表示にするためtop:-100pxで表示エリア外においておく。transitionは1sに設定して1秒でアニメーションするようにしている。あとはJqueryで「ds_nav」の要素に「isActive」を付加してtop:0pxでエリア内に表示するようにしている

#ds_nav,#ds_nav_dummy {
 width: 100%;
 background-color: #000;
 margin: 0px auto 0px auto;
 z-index: 200;
 opacity:0.85;
 color:#fff;
}
#ds_nav.isActive {
 left: 0;
 right: 0;
 top:0px;
 position: fixed;
}
#ds_nav_dummy{
 display:none;
}
#ds_nav_dummy.isActive{
 display:block;
}

メニュー部分のHTMLは以下の通り。とりあえず外側だけ

ds_nav_dummyは、ds_navをTOPに固定するとそのすぐ下の要素が画面TOPに移動して画面がガクッとなるのを防ぐために、本番要素と同じ縦幅のものを変わりに配置して画面がガクッとならないようにするため。なのでds_nav_dummyは通常では隠すようにdisplay:noneを設定してActiveになるとdisplay:blockになるようにしている

<nav id="ds_nav">
・・・メニューの中身を書く
</nav>
<nav id="ds_nav_dummy">
・・・ダミーだが本当のメニューと同じ高さになるように調整すること
</nav>

スクロールして表示・非表示させるjavascriptコードは以下の通り。下のコードは該当要素が画面TOPに来た場合、classのisActiveを付与する。該当要素が画面TOPの下に来た場合、classのisActiveを削除する

<script>
 window.onload = function(){
  var $globalMenu = document.getElementById( 'ds_nav' );
  var $globalMenu_dummy = document.getElementById( 'ds_nav_dummy' );
  var $distanceFromTheTop = $globalMenu.getBoundingClientRect().top + window.pageYOffset;
  window.onscroll = function(){
   if( window.pageYOffset > $distanceFromTheTop ) {
    $globalMenu.setAttribute( 'class', 'isActive' );
    $globalMenu_dummy.setAttribute( 'class', 'isActive' );
   } else {
    $globalMenu.setAttribute( 'class', '' );
    $globalMenu_dummy.setAttribute( 'class', '' );
   }
  }
 }
</script>