スマートフォンでslideDownとslideUpが2回効いてしまうのを直したいです。

Question

JS初心者のものです。
スマートフォンでのslideDownとslideUpに関して質問させてください。

現在スクロールすると途中からナビゲーションがslideDownで出てくるサイトを作っています。 （ minedenim.jp のようなサイトです。 ）
基本的に1ページで、ナビゲーションにアンカーリンクをつけてその指定場所にスムーススクロールするといったよくあるサイトです。

一部下層ページがあり、下層ページのナビゲーションをTOPトップページのアンカーリンクを指定したところにすると、
PCだとアンカーリンクも効いてナビゲーションがきちんとslideDownで表示されるのですが、
SPから確認するとナビゲーションがslideDownで表示され、slideUpでナビゲーションが戻り、それから再度slideDownでナビゲーションが表示されることが結構あります。（ならないときもあります。）

ここで詰まってしまい解決できないため質問させていただきました。
おそらく書き方が悪いと思いますので、皆様のお力を貸していただきたく思います。

JSは</body>直前で読み込ませております。

ソースコード一式を下記に記載させていただきますので、お力添えをいただけますと非常に助かります。
何卒宜しくお願い致します。

// =====================================================================
// ============================== PC/SP 共通 ==============================
// =====================================================================

$(function(){

    // biggerlink
    $('#projects .article').biggerlink();

    // matchHeight
    $('.js-matchHeight').matchHeight();

    // smooth scroll
    $('a[href^=#]').click(function(){
    var speed = 1000;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "easeInOutQuad");
    return false;
    });

});

// PC/SP条件分岐
var windowWidth = $(window).width();
var windowSm = 824;
if (windowWidth <= windowSm) {

 // =========================================
 // ========== 横幅824px以下に行う処理を書く =========
 // =========================================

$(function(){

    // 途中ヘッダー出現
    $(window).on("load scroll", function () {
     if ($(this).scrollTop() > 35) {
       $(".cb-header").slideDown();
     } else {
       $(".cb-header").slideUp();
     }
    });

});

} else {

 // =============================================
 // ========== 横幅825px超のときに行う処理を書く ==========
 // =============================================

 $(function(){

     // 途中ヘッダー出現
     $(window).on("load scroll", function () {
      if ($(this).scrollTop() > 92) {
        $(".cb-header").slideDown();
      } else {
        $(".cb-header").slideUp();
      }
     });

     // firefox用 ヘッダー固定
     $(window).load(function (){
      if(top.location.href.match(/\#projects$/)){
       top.location.href = "index.html#projects",
       $(".cb-header").slideDown();
      } else if(top.location.href.match(/\#people$/)){
       top.location.href = "index.html#people"
      } else if(top.location.href.match(/\#company$/)){
       top.location.href = "index.html#company"
      }
     });

 });

}

Answer 1

ヘッダ出現の判定がよくないようです。
質問のコードでは、scrollイベントが呼び出されるたびにslideUpなどの処理がされています。
scrollイベントはちょっとスクロールされる間に何十回と呼び出されるものですので、何十回とslideUpを実行しようとして、結果的におかしくなるのです。
slideUp,slideDownを呼び出すのは、scrollTopの値が、ある閾値（しきいち）を超えた瞬間だけにすれば、おかしな挙動をしなくなります。
具体的にいうと、こんな感じのコードです。

var s_old = $(window).scrollTop();// ここに「前回のスクロール位置」を常に保存します
$(window).on("load scroll", function () {
	var t = 35;
	var s = $(this).scrollTop();// 今回のスクロール位置
	if ((s_old < t)&&(t <= s)){
		$(".cb-header").slideDown();
	} else if ((s < t)&&(t <= s_old)){
		$(".cb-header").slideUp();
	}
	s_old = s;
});

##追記
iPhoneではscrollTopが前後することがあるのがわかりましたので、スライド中はスライドなうでフラグ管理して、過敏な反応をしないようにしておけば、うまく行くかと思います。

var slide_now = false;
var s_old = $(window).scrollTop();// ここに「前回のスクロール位置」を常に保存します
$(window).on("load scroll", function () {
	if (slide_now) return true;
	var t = 35;
	var s = $(this).scrollTop();// 今回のスクロール位置
	if ((s_old < t)&&(t <= s)){
		slide_now = true;
		$(".cb-header").slideDown("slow",function(){
			slide_now = false;
		});
	} else if ((s < t)&&(t <= s_old)){
		slide_now = true;
		$(".cb-header").slideUp("slow",function(){
			slide_now = false;
		});
	}
	s_old = s;
});

Comments

[退会済みユーザー]

zohnamさま

早速のご回答ありがとうございます。
何度も処理が起こってしまっていたんですね。
とても勉強になります！

ですが、いただきましたソースコードを貼ったあと、キャッシュクリアして確認してみましたが、直りませんでした。。

[zohnam]

・横幅825px超用の、92pxをしきい値にしてるほうも同様のコードに変えてみる。
・smooth scroll処理部分をいったんコメントアウトしてみる（scrollTop関係でいじってるようなので、これはけっこう怪しいです）
この2点をやってみてください。

[退会済みユーザー]

頂いた情報でやってみたのですが、やはり直りませんでした。。
せっかくご回答頂いているのにすみません(泣)
直接テストサイト見ていただけたら解決できるかもしれませんが。。

[zohnam]

そうですね。可能ならテストサイトのURLを追記してください。

[退会済みユーザー]

一時的に共有させていただきます。
サイトがご確認いただけたら編集で削除しますので、宜しくお願い致します。

[退会済みユーザー]

PROJECTのサムネイル1つ目から下層ページにいけますので、ご確認をお願い致します。
サイトにアクセスできましたら、ご連絡宜しくお願い致します。

[zohnam]

確認しました。Androidではscrollイベント頻度が少なめなのか、問題が起きてるのは見受けられませんでした。
iPhoneでは、scrollイベントが頻繁におきてるので、多少scrollTopの位置取得のタイミングが前後することがあるようですね。1回のスクロール操作でscrollTopが0,3,2,7,5,9のような取れ方をすることがあります。

[退会済みユーザー]

ご確認ありがとうございます！
追記していただいたものを実行してみます。

[退会済みユーザー]

zohnamさま

追記いただいたところをアップして確認したところ、症状が直り、正常に動作しました！
zohnamさまの方でも大丈夫そうでしたら、ベストアンサーに選定させていただきます！

[zohnam]

確認しました。問題なさそうですね。

[退会済みユーザー]

zohnamさま
ご確認いただきましてありがとうございました！

[退会済みユーザー]

@zohnamさま

以前こちら解決したのですが、新たに作り直すことになりまた不具合が出てしまいました。
解決したいので、どうかお力お貸しいただけないでしょうか。
よろしくお願いいたします。
https://teratail.com/questions/89586