レスポンシブサイトでスクロールすると現れるナビゲーションについて

Question

レスポンシブサイトを作成中です。
ナビゲーションが３つあり、ブレークポイントでそれぞれ表示を切り替えるということをしたいのですが、うまくいきません。

1000px以上では、navi1 と navi2 が最初に表示されています。
100pxスクロールするとnavi1 と navi2 が非表示になり、navi3 が表示されます。

1000px未満では、navi1 だけが表示されます。

各ウィンドウサイズでブラウザを更新すると望み通りの動きになりますが、ウィンドウを縮めたり広げたりすると、1000px未満で navi2 と navi3 が表示されてしまうのです。

次のようなコードですが、ウィンドウサイズを変更しても動くようにするにはどうしたらよいでしょうか。

  $(window).on('load resize', function(){
    var w = $(window).width();
    var x = 1000;
    var navi1 = $('#pNav');
    var navi2 = $('#large-navi');
    var navi3 = $('#barNav');    
    navi3.hide();

    if (w >= x) {
      //スクロールが100に達したらボタン表示
      $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
          navi1.fadeOut();
          navi2.fadeOut();
          navi3.fadeIn();
        } else {
          navi1.fadeIn();
          navi2.fadeIn();
          navi3.fadeOut();
        }
      });
    }

Answer 1

windowリサイズ時に1000px以上だった時の度にスクロールのイベントがbindされてしまっているので余計に不思議な挙動になってしまっているものと思います。
x方向の動きとy方向の動きを同時に考えてしまっているので混乱してしまっているのかなと思いました。

x方向のルール

1. ブラウザサイズが__1000px__未満の時

• navi1 常に表示
• navi2 常に非表示
• navi3 常に非表示

1. ブラウザサイズが__1000px__以上の時

• スクロール量に応じてnavi1, navi2, navi3 の表示方法が変わる

y方向のルール

1, スクロール量が__100px__ 以下の時

• navi1 表示
• navi2 表示
• navi3 非表示

2, スクロール量が__100px__ より大きい時

• navi1 非表示
• navi2 非表示
• navi3 表示

と言う感じになるかと思います。
ですので、下記のような感じにウィンドウ幅が変更された時の処理とスクロールの処理を分けて考えると良いかと思います。
A. ウィンドウ幅が変更された時に__1000__px未満かどうか調べて表示を切り替える処理
B. スクロールがあった時にウィンドウ幅が__1000px__以上なら、スクロール量に応じて表示を切り替える処理

レスポンシブWebデザインのタグも付いておりますので、
__A.__の1000px未満の場合の表示切替はCSSのメディアクエリを使うのが良いかと思います。

@media screen and (max-width: 999px) {
  #pNav {
    display: block !important;
  }
  #large-navi, #barNav {
    display: none !important;
  }
}

後は__B__の方法の実装を考えれば良いかと思います。
テキトーに作ったものも載せておきます。動作保証はしていませんので処理を考える参考までに、

$(function() {
  var $w = $(window),
      overMinWidthFlg = false,
      timer,
      $navi1 = $('#pNav'),
      $navi2 = $('#large-navi'),
      $navi3 = $('#barNav');

  $w.on('scroll', function(evt) {
    clearTimeout(timer);
    timer = setTimeout(function() {
      var sT = 0,
          y = 100;
      if( overMinWidthFlg ) {
        sT = $w.scrollTop();
        if( sT > y ) {
          $navi1.fadeOut();
          $navi2.fadeOut();
          $navi3.fadeIn();
        } else {
          $navi1.fadeIn();
          $navi2.fadeIn();
          $navi3.fadeOut();
        }
      }
    }, 100);
  })
  .on('load resize', function(evt) {
    var w = $w.width(),
        x = 1000;
    if( w >= x ) {
      overMinWidthFlg = true;
      /*
        ウィンドウ幅が1000px以上になった時 既に100px以上のスクロールがある可能性があるので
        スクロール時のイベントを実効してあげる 
       ※load時にウィンドウ幅1000ox以上かるスクロール量が100px以上あると
          fadeIn, fadeOutの処理になるのでチラつくはずなので、
          気になるならhide/showなどの別の処理にする必要がある
     */
      $w.trigger('scroll');
    } else {
      overMinWidthFlg = false;
      /* CSS使わないならここでウィンドウ幅1000px未満の時の表示切替の処理を書いてしまってもOK */
    }
  });
});

Comments

[Cf_cwd]

!importantはよほどのことがない限り使わない方がいいように思えるのですがどうでしょうか？

[KiKiKi_KiKi]

はい。!importantは個人的に邪悪な技だと思っていますのでよほどのことがない限り使わない方が良いと考えています。
ただ、jsの処理とかでなにかしらスタイルを付けてしまう処理とかを書いちゃって、どーなってるのか解らない！ってなる可能性があるのであれば`!important`を書いていたほうが確実かなと考えた程度です。(jsで!important付きのスタイル与えるのメンドーですからw)
スタイルの当たる強さのルールとjsでどんな時に何をしているのかが理解しているのであれば!importantを付ける必要性は全くないと考えています。

[gab]

わかりやすく教えていただきありがとうございます。
ご提示いただいたコードで目的の表示になりました。

Answer 2

X座標の判定とY座標の判定が混在しています。情報の整理が必要かと思いますがいかがでしょうか。

Comments

[gab]

ご回答ありがとうございます。
x座標とy座標を分けて考えなければ行けなかったのですね。