簡単なフロートメニュー【position: sticky;】

jqueryやjavascriptを使用せず、cssのみでフロートメニューを作ります。

○index.html


<!DOCTYPE html>
<html lang="ja">
<head>
　　<meta charset="utf-8"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
　　<title>タイトルだよ</title>
　　<meta name="description" content="ディスクリプションだよ">
　　<meta name="keywords" content="キーワード1, キーワード2">
　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　<link rel="stylesheet" href="../css/common.css">
　　<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--header-->
<header></header>
<main ontouchstart="">
　　<div class="wrap">
　　　　<div class="content">
　　　　　　<div class="floatBox">
　　　　　　　　<div class="floatMenu">
　　　　　　　　　　<ul>
　　　　　　　　　　　　<li>メニュー1</li>
　　　　　　　　　　　　<li>メニュー2</li>
　　　　　　　　　　　　<li>メニュー3</li>
　　　　　　　　　　　　<li>メニュー4</li>
　　　　　　　　　　　　<li>メニュー5</li>
　　　　　　　　　　</ul>
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<div class="base">
　　　　　　　　<p>テキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモ</p>
　　　　　　　　<img src="https://placehold.jp/300x200.png">
　　　　　　　　<p>テキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモ</p>
　　　　　　　　<img src="https://placehold.jp/300x200.png">
　　　　　　　　<p>テキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモ</p>
　　　　　　　　<img src="https://placehold.jp/300x200.png">
　　　　　　　　<p>テキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモ</p>
　　　　　　　　<img src="https://placehold.jp/300x200.png">
　　　　　　　　<p>テキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモ</p>
　　　　　　　　<img src="https://placehold.jp/300x200.png">
　　　　　　　　<p>テキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモ</p>
　　　　　　　　<img src="https://placehold.jp/300x200.png">

　　　　　　</div>
　　　　</div>
　　</div>
</main>
<!--footer-->
<footer>
</footer>
</body>
</html>

○index.css

.wrap {
  background-color: #e6e6e6;
  padding: 100px 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.floatBox {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


.floatMenu {
  position: sticky;
  top: 0;
  max-width: 300px;
  width: 100%;
  margin: 0 0 0 auto;
  background: #ddd;
  color: #444;
  pointer-events: auto;
}

.floatMenu ul {
  list-style: none;
}

・フロートメニューを追従させたい範囲(base)と、フロートメニュー(floatBox)をdiv(content)で囲う。

・contentに対してrelativeを適用。

・フロートメニュー(floatBox)に対してabsoluteを適用。子要素のfloatMenuに対してposition:sticky適用。

・上部の要素にマウスの判定がなるように、floatBoxにたいしてpointer-events:none、floatMenuに対してpointer-events:autoを適用

終わり。