追従型ボタンとは
縦に長いWebサイトを縦に画面スクロールしても、常に同じ位置に留まり続けるボタンのこと。
通常のメニューの場合、画面をスクロールするとメニューは見えなくなってしまいますが、追従型メニューの場合には、画面スクロールさせても表示されたままになります。 別名「固定メニュー」「固定表示メニュー」と言ったりもします。
主な作り方は２通り
- HTMLとCSS
- JQueryライブラリ
HTMLとCSS
HTML<div class="wrap">
<div class="left_contents">
<div class="menu">
<h2>menu</h2>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
</ul>
</div>
</div>
<div class="right_contents">
<h2>タイトル</h2>
<div class="main">
メインコンテンツ
</div>
</div>
</div>
CSS
.wrap {
width: 100%;
height: 100%;
display: flex;
}
.left_contents {
width: 20%;
height: 1200px;
background-color: #D00;
}
.menu {
position: -webkit-sticky; /* 任意 */
position: sticky;
background-color: lightgreen;
top: 0;
}
.right_contents {
float: right;
width: 80%;
height: 1200px;
background-color: rgb(144, 211, 238);
}
h2 {
margin: 0;
}