はじめに
スマホページによくあるメニューバーや新規作成ボタンをスクロールの方向に合わせて出したり引っ込めたりするUI。
簡単に実装できるので紹介します。
実装方法
下記のような方法で実装できます。
スクロールの量をリアルタイムで監視して、その量に応じてボタンを出し入れしています。
出し入れの実態は「hide_to_right」というクラスを追加するか削除するかです。ここでは「right:-120px」としていますが、これを「bottom:-100px」などとするとボタンが下に隠れたり出てきたりするようになります。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<style>
#compose_btn{
position: fixed;
bottom: 20px;
right: 20px;
background: #000;
color: #fff;
font-weight:bold;
transition:all 1s;
}
.hide_to_right{
right:-120px!important;
}
.dummy{
background:#000;
width:100px;
height:10000px;
}
</style>
<script>
$(function(){
var pos = 0;
var compose_btn = $('#compose_btn');
$(window).on('scroll', function(){
var bottom = $(document).innerHeight() - $(window).innerHeight();
if($(this).scrollTop() < pos || $(this).scrollTop() < 100){
compose_btn.removeClass("hide_to_right");
}else{
compose_btn.addClass("hide_to_right");
}
pos = $(this).scrollTop();
});
});
</script>
</head>
<body>
<div class="dummy"></div>
<button id="compose_btn">新規作成</button>
</body>
</html>最後に
gokeでは上記のようなプログラムを駆使して新しいサービスを制作しています。
気になることなどがあればコメントまたはTwitterでご連絡ください。