経緯
ちょっとオシャレ？なヘッダーを作ってみたくなった備忘録です。
railsで普段開発してるので最後はrailsで導入する方法もサラッと書いてます。
完成形
See the Pen Untitled by okok111 (@okok111) on CodePen.
実装
- と言いつつも上のcodePenに書いてあることコピペしてもらえれば何とかなるはず。
- 見栄えのために書いた不必要な部分があるので必要な部分だけ解説付きで書くとこんな感じ。
html部分
~~~~省略~~~~~
<body>
<header>
headerの内容
</header>
<main>
mainの内容
</main>
</body>
headerとmainの要素あれば何とかなります。
cssの部分
header{
height: 80px;
width: 100%;
position: fixed;
top: 0;
z-index: 99;
transition: transform 0.3s 0.3s;
}
header.hidden {
transform: translateY(-80px);
}
main{
padding-top: 80px;
}
-
headerのheight: 80px; -
header.hiddenのtransform: translateY(-80px); -
mainのpadding-top: 80px;
これらの数値 (80pxの所) を変更する場合は揃えるようにしましょう。
javascriptの部分
const header = document.querySelector('header');
let prevY = window.scrollY;
window.addEventListener('scroll', () => {
const currentY = window.scrollY;
if (currentY < prevY) {
header.classList.remove('hidden');
} else {
if (currentY > 0) {
header.classList.add('hidden');
}
}
prevY = currentY;
});
- コピペで大丈夫です
- htmlに直接貼り付ける場合は
<script></script>で挟むようにしてください。
以上です。
おまけ
railsで作ってる人に向けて普段発信しているのでrailsで適用する方法も置いときます。
htmlの記述
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>movie Memo</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<header>
</header>
<%= javascript_pack_tag 'header' %>
<main>
<%= yield %>
</main>
</body>
</html>
- 後ほど作成するJSファイルと紐づけるための
<%= javascript_pack_tag 'header' %>を追記 -
<%= yield %>をmainで囲む
この二点だけご注意ください。
cssの表記
前述と内容は同じなので省略
JavaScriptの表記
-
app/javascript/packs/下にheader.jsを作成してください
app/javascript/packs/header.js
const header = document.querySelector('header');
let prevY = window.scrollY;
window.addEventListener('scroll', () => {
const currentY = window.scrollY;
if (currentY < prevY) {
header.classList.remove('hidden');
} else {
if (currentY > 0) {
header.classList.add('hidden');
}
}
prevY = currentY;
});
内容は前述のJavaScriptの物と変わりはないです。