用途
新着
履歴
分類

jQuery 上部スクロールでローディングアニメ

jQuery 上部スクロールでローディングアニメ

スマホで最上部までスクロールし、さらに引っ張ると更新されたり、データが読み込まれたりする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>

このページにも実装してあるので、スマホで画面上部を強めにひっぱり下げてみてください。

公開 2020-08-11 23:50:19
更新 2020-09-13 15:03:45
このページの二次元コード
jQuery 上部スクロールでローディングアニメ

人気のサンプル

search -  category -  about
© 2024 kipure
Top