スクロールすると出るボタン。スクロール位置で要素を表示させる。

2019.06.27

#css #WEBサイト改善メモ

ファーストビューでは非表示。
一定量をスクロールしたら、ボタンを出したい。

PCのときだけ、SNSのボタンを画面の左端に出してみました。

html

該当の要素に「is_flow」というクラスを付与。

<!-- 常に横にいるボタン -->
<div class="flow-nav__wrapper is_flow">
 <div class="flow-navi">
  <ul>
   <li>ボタン1</li>
   <li>ボタン2</li>
   <li>ボタン3</li>
  </ul>
 </div>
</div>

css

.flow-navi__wrapper {
  display:none;
}
.flow-navi {
  position: fixed;
  top: 260px;
  z-index: 3;
}
@media(max-width:863px) {
 .flow-navi__wrapper {
   position: static;
 }
 .flow-navi {
   display:none;
 }
}

今回は、PCのときだけ表示させたかったので、こんな感じにしてみました。
初期表示では、一番外側のクラス「flow-navi__wrapper」をdisplay:noneに。
画面幅が863px以下になったら「flow-navi」をdisplay:noneにしてボタンを隠します。

jQuery

$(window).on('load scroll', function(){
  if ($(window).scrollTop() > 200) {
    $('.is_flow').fadeIn(400);
   } else {
    $('.is_flow').fadeOut(400);
   }
});

画面のはじまりから200の位置までスクロールしたときに「is_flow」を付与した要素を表示。
fadeIn()とfadeOut()で、ボタンをゆっくり表示/非表示させます。(400)はスクロールする時の速度。

今回設置したのは画面の左隅にひっそりと佇むボタンですが、ページの最上部にスクロール移動する「PAGE TOP」のような固定配置したいボタンや、スマホの時にだけ出現する最下部のメニューだとか、左右に固定しておきたいカラムなどなど。いろいろなところで使えそうです。