Jqueryの挙動を修正したい。スクロール値からのfadeIn fadeOut

いつもご教授頂きましてありがとうございます。

Jqueryの挙動を修正したいのですが上手く修正が出来ません。
やりたい事としましては
スクロール値を取得し0ならfadeOut
スクロールを始めるとfadeInというシンプルな物です。
（スマートフォン上での動作です）

$(function() {
	$(window).scroll(function () {
	var s = $(this).scrollTop();
	var m = 100;
	
		setTimeout(function(){
			if(s > m) {
				$(".fix_menu").fadeIn('slow');
			} else if(s < m) {
				$(".fix_menu").fadeOut('slow');
			}
		},500);
	});
});

サイトスタート位置まで来ますと消える仕組みです。
動作はしております。

少し改良を加えて

$(function() {
	$(window).scroll(function () {
	var s = $(this).scrollTop();
	var m = 100;
	
		setTimeout(function(){
			if(s > m) {
				$(".fix_menu").stop().fadeIn('slow');
			} else if(s < m) {
				$(".fix_menu").stop().fadeOut('slow');
			}
		},500);
	});
});

このようにしました。
これである程度挙動を制御出来たのですが

指でスクロール中はアニメーションが停止し半透明などになります。
このスクロール中でもfadeIn,fadeOutを続行するようには出来ないものなのでしょうか？

お手数おかけいたしますがよろしくお願い致します。

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

回答1件

ベストアンサー

質問のコードでは、scrollイベントが呼び出されるたびにsetTimeoutの登録がされています。
scrollイベントはちょっとスクロールされる間に何十回と呼び出されるものですので、$(".fix_menu")はfadeOut,fadeIn,stopを何十回と繰り返そうとして、結果的に点滅状態になるのです。
fadeInなどの呼び出しは、スクロール値が一定の高さを超えたその瞬間だけ呼び出すようにすれば、問題は起きません。
また、ディレイ部分としてsetTimeoutを使われていますが、jQueryならば、delayを使えば、fadeInなどのアニメーション処理と相性がよいです。

javascript
1var s_old = $(window).scrollTop();
2$(window).scroll(function () {
3	var m = 100;
4	var s = $(this).scrollTop();
5	if ((s_old < m)&&(m <= s)){
6		$(".fix_menu").stop().delay(500).fadeIn('slow');
7	} else if ((s < m)&&(m <= s_old)){
8		$(".fix_menu").stop().delay(500).fadeOut('slow');
9	}
10
11	s_old = s;
12});