【CSS】スクロールすると出てくるボタンの作成方法

# ０，はじめに
　自分用メモレベルで書いてる

# １，やりたいこと
　この動画のようにスクロールすると出てくるボタンを作成。
![ボタン.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3821597/bd0da593-ceb4-5106-9477-4c5a7c737ae8.gif)

# ２，HTML
```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部分
#### 全体にかける、、、
```css:index.css
* {
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}
```
〜解説〜
* `overflow-x: hidden;`にすることで、横方向へのスクロールを不可する
* `scrollbar-width: none;`で、スクロールバーを非表示にする

#### ボタンの装飾と機能を追加、、、
``` css: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部分
``` 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のところとか覚える必要なくて、コピペできるようにしとこうという話。