啓文社 - 2013.12.15　[JavaScript] スクロールでヘッダの表示切替

トップ > 2013年 > 2013.12.15　[JavaScript] スクロールでヘッダの表示切替

[JavaScript] スクロールでヘッダの表示切替
2013.12.15記

ページのヘッダー部分を下スクロールで非表示にして、上スクロールで表示する「headroom.js」を試してみました。

http://wicky.nillia.ms/headroom.js/
https://github.com/WickyNilliams/headroom.js

HTML


<header class="headroom header--fixed animated" id="header2">
  <br>啓文社
</header>

CSS


.headroom{
    background-color: #292f36;
    height: 60px;
    color: #fff;
    font-size: 2em;
    padding-left: 10px;
}
.header--fixed{
    position: fixed;
    z-index: 10;
    right: 0;
    left: 0;
    top: 0;
}
.animated{
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -o-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}
slideDown{
    0%{-webkit-transform:translateY(-4em);}
    100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes slideDown{
    0%{-moz-transform:translateY(-4em);}
    100%{-moz-transform:translateY(0);}
}
@-o-keyframes slideDown{
    0%{-o-transform:translateY(-4em);}
    100%{-o-transform:translateY(0);}
}
@keyframes slideDown{
    0%{transform:translateY(-4em);}
    100%{transform:translateY(0);}
}
.animated.slideDown{
    -webkit-animation-name: slideDown;
    -moz-animation-name: slideDown;
    -o-animation-name: slideDown;
    animation-name: slideDown;
}
slideUp{
    0%{-webkit-transform:translateY(0);}
    100%{-webkit-transform:translateY(-4em);}
}
@-moz-keyframes slideUp{
    0%{-moz-transform:translateY(0);}
    100%{-moz-transform:translateY(-4em);}
}
@-o-keyframes slideUp{
    0%{-o-transform:translateY(0);}
    100%{-o-transform:translateY(-4em);}
}
@keyframes slideUp{
    0%{transform:translateY(0);}
    100%{transform:translateY(-4em);}
}
.animated.slideUp{
    -webkit-animation-name: slideUp;
    -moz-animation-name: slideUp;
    -o-animation-name: slideUp;
    animation-name: slideUp;
}

JavaScript


<script type="text/javascript" src="headroom.min.js"></script>
<script>
  (function() {
    var header = new Headroom(document.querySelector("#header2"), {
      tolerance: 5,
      offset : 205,
      classes: {
        initial: "animated",
        pinned: "slideDown",
        unpinned: "slideUp"
      }
    });
    header.init();
  }());
</script>

http://wicky.nillia.ms/headroom.js/
このサイトに書いてある HTML と JavaScript だけではうまくいかなかったので、サンプルを見ながら CSS などを追加してこのサイトに設置してみました。

この記事の1行目に飛ぶ

2013年

2013.11.15　Google Fonts