０，はじめに
自分用メモレベルで書いてる
１，やりたいこと
この動画のようにスクロールすると出てくるボタンを作成。
２，HTML
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロールすると出てくるやつ</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="header">
<div class="header-rogin">
<button>
<p>ログイン</p>
</button>
</div>
<div class="header-signup">
<button>
<p>新規登録</p>
</button>
</div>
</div>
<div class="main">
<div><h3>タイトル1</h3><p>本文</p></div>
<div><h3>タイトル2</h3><p>本文</p></div>
<div><h3>タイトル3</h3><p>本文</p></div>
<div><h3>タイトル4</h3><p>本文</p></div>
<div><h3>タイトル5</h3><p>本文</p></div>
<div><h3>タイトル6</h3><p>本文</p></div>
</div>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
- linkタグでCSSファイルに接続
- ScriptタグでJSファイルに接続
-
id="header"の部分 → スクロールすると表示される部分
３、動作部分を作る
CSS部分
全体にかける、、、
index.css
* {
margin: 0;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
}
〜解説〜
-
overflow-x: hidden;にすることで、横方向へのスクロールを不可する -
scrollbar-width: none;で、スクロールバーを非表示にする
ボタンの装飾と機能を追加、、、
index.css
#header {
position: fixed;
top: -100vw;
width: 100%;
text-align: right;
box-sizing: border-box;
transition: .5s;
z-index: 1000;
display: flex;
justify-content: flex-end;
}
#header.is-show {
top: 0;
}
#header > div > button {
margin: 0.5vw;
font-size: 1.5vw;
border-radius: 1vw;
color: #000000;
font-weight: bold;
width: 10vw;
height: 5vw;
background-color: #fff;
border: 0.1vw solid #000000;
}
#header > div :hover {
transition: 0.5s;
color: #0c318d;
}
〜機能に必要な内容の解説〜
-
position: fixed;は、ヘッダーなど上部に固定する要素を作るときに使う -
top: -100vw;：重要ポイント
→スクロール前は表示画面よりも上に設置する
→vwを用いなくてもよい -
transition: .5s;で、変化前（非表示）から変化後（表示）を滑らかにつなげる
→.5sは0.5秒で作業を行うということ -
z-index: 1000;で、何よりも最前面に表示すると指定 -
display: flex;は、子要素を横並びにするとき使う
→justify-content: flex-end;で、子要素を右揃えにする -
#header.is-show：重要ポイント
→#headerにis-showというクラスがついたときのCSS
→JavaScriptでつける
〜ついでの内容の解説〜
-
:hoverボタンに触れられたときのCSS
JS部分
index.js
(function() {
const fh = document.getElementById('header');
const isUp = (function() {
const scrollElement = document.scrollingElement;
let flag, prePoint = scrollElement.scrollTop, scrollPoint;
return function() {
scrollPoint = scrollElement.scrollTop;
flag = prePoint > scrollPoint;
prePoint = scrollPoint;
return flag;
}
}());
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
if (isUp()) {
fh.classList.remove('is-show');
} else {
fh.classList.add('is-show');
}
} else {
fh.classList.remove('is-show');
}
});
}());
〜解説〜
-
(function () { ~内容~ })();は、即時実行関数（IIFE）と呼ばれる
→定義されると同時に実行される -
const fh = document.getElementById('header');
→fhという変数に#headerの内容を定義 -
isUp部分は、スクロール方向を判定する関数
→まるまま覚えた（コピペできるようにした）方がいいかも -
window.addEventListener('scroll', () => { ~内容~ });
→スクロールされたときに実行する関数 -
window.pageYOffset > 300は、スクロールが300pxを超えたらという意味
〜つまり〜
①一定以上スクロールされたら、
②スクロールが上向きか下向きか判断し、
③上向きなら#headerの.is-show削除で要素を隠し、
④下向きなら#headerの.is-show追加で要素を表示されている
４，まとめ
JSのところとか覚える必要なくて、コピペできるようにしとこうという話。