スマホで最上部までスクロールし、さらに引っ張ると更新されたり、データが読み込まれたりするUIがよくあります。
そのサンプルを作ってみました。
スマホの場合、目一杯スクロールするとJSで取れるスクロールの値がマイナスになるので、それを検知して発火させます。
JSはこちら
v=0;
$(window).on("scroll",function() {
st = $(this).scrollTop();
if(st < -80 && v === 0){
v=1;
$("#demo_text").slideDown().delay(2000).slideUp(1000,function(){
v=0;
});
}
});
Now loadind... 的な表示
表示されるHTMLはこちらです。
<div id="demo_text">Now loadind... 的な表示</div>
このページにも実装してあるので、スマホで画面上部を強めにひっぱり下げてみてください。
