スクロール中は非表示になり、一番上でも非表示になる　上へボタン

前提・実現したいこと

jqeuyryで、スクロールしていると上へボタンが消え、決まった範囲の中で止まると表示される、少し凝った上へボタンを作りたいと思っています。
以下は、こちらで教えてもらって、スクロール中も表示される物です。

var s_old = $(window).scrollTop();
    $(function(){
		$("#ST-top").hide();
		$("#ST-top img.active").hide();
		$(window).scroll(function(){
	var m = 100;
    var s = $(this).scrollTop();
		  if ((s_old < m)&&(m <= s))
			 {$("#ST-top").delay(2000).fadeIn(1000)}
			 else if ((s < m)&&(m <= s_old))
			 {$("#ST-top").hide();}
									s_old = s;});	

    $("#ST-top").click(function(){
		$("#ST-top").hide();
		$("body,html").animate({scrollTop:0},800);
								  return false});
		$("#ST-top").hide();
  });

htmlは次のようになっています。

<div class="scrollup">
<a id="ST-top" style="cursor: pointer; font: 12px arial; display: block;z-index:999;">
<img src="uehover.png" width="107px" height="96px" class="active" />
<img src="ue-1.png" width="96px" height="87px" class="off"/>		
</a>
</div>

”#ST-top” をクリックすると、上へ行くボタンですが、こちらで教えてもらい、見事に動いております。
画像を2つあるのは、クリックするとhoverの画像に切り替わるという別のファンクションを書いています。

発生している問題・エラーメッセージ

しかし、これですと、スクロール中も表示が続くので、スクロール中は表示させたくないと思いました。

試したこと

こちらの記事を見て、

var isScrolling = 0 ;
var timeoutId ;
window.addEventListener( "scroll", function () {
	//ここに、$("#ST-top").hide();

	// スクロールを停止して500ms後に終了とする
	clearTimeout( timeoutId ) ;

	timeoutId = setTimeout( function () {
		//ここの部分にif構文を書いて、表示させる場合と、そうでない場合を書く
	}, 500 ) ;
} ) ;

発生している問題

のような物を、いろいろ書いてみたのですが、確かにスクロール中は表示がなくなり感じはよくなるのですが、読み込んだ時には非表示になりますが、、上下のスクロールをして、再度、scrollTop=0となる時に　$("#ST-top").hide();　が実現できません。

何かよいアイデアがありましたら教えてください。　よろしくお願いします。

x_x

2019/05/14 04:37

過去に質問されたことはないようですが、「こちらで教えてもらって」というのはどういうことでしょう？別の質問を参考にしたのであれば挙げてください。

yumisaiki

2019/05/15 13:16

https://teratail.com/questions/83769 これを見て、上のは書いたのです。ただ、もっといいのにしたいと… 忙しくて検証する暇がなく申し訳ございません。　しばらくお待ちください

行動規範の内容に同意します

回答1件

表示される条件が
・下にスクロールして止まった時に
・m以上(100以上)
ということであれば

jQuery
1    timeoutId = setTimeout(function () {
2        var s = $(window).scrollTop();
3        if (s_old < s && m <= s) {
4            $("#ST-top").stop(true, true).delay(1500).fadeIn(1000);
5        } else {
6            $("#ST-top").stop(true, true).hide();
7        }
8
9        s_old = s;
10    }, 500);