Now Loading...
menu
  • すべて
  • web制作
  • 写真を楽しむ
  • カメラで遊ぶ
  • モノ
  • 旅
  • おすすめツール

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

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

ファーストビューでは非表示。

一定量をスクロールしたら、ボタンを出したい。

 

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

 


html

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

 

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

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

// SCROLL
$(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」のような固定配置したいボタンや、スマホの時にだけ出現する最下部のメニューだとか、左右に固定しておきたいカラムなどなど。いろいろなところで使えそうです。

 

 

share on

TIPS&NOTE TOPへ