Javascriptでパソコンの場合だけ、ナビゲーションを途中から固定したい

前提

実現したいこと

グローバルナビがコンテンツの途中にあります。
PCのときだけ、スクロールして一番上部に来たときに固定したいです。
スマホでは何もしません。

「途中から固定」のサンプルはいくらでもあるのですが。
PC、スマホで切り替えたい場合の書き方が分かりません。
切り替えはユーザーエージェントではなく、ブラウザサイズを利用します。

リロードしたとき、リサイズしたときにウィンサイズを判定して、
パソコンの時だけ、スクリプトを動かす、ということができれば
いいと思うのですが、条件分岐を書いても、
リサイズでスマホサイズにするとスクリプトが動いてしまいます。

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

ウィンサイズをリサイズすると、スマホでもスクリプトが動く。

該当のソースコード

このサイトの「ナビゲーションが途中から固定」のところを参考に、分岐を追加しています。
https://www.nxworld.net/stikcy-or-change-header-and-navigation-when-scrolling-using-jquery.html

(function($) {
  var $main = $('.main');
  var $nav = $('.global-nav');
  var fixedClass = 'fixed';
  
  $(window).on('load resize', function(){
    var _width = $(window).width();
    if(_width >= 768){
    
      var navHeight = $nav.outerHeight();
      var navPos = $nav.offset().top;

    $(window).on('scroll', function() {
      var value = $(this).scrollTop();
      if ( value > navPos ) {
        $nav.addClass(fixedClass);
        $main.css('margin-top', navHeight);
      } else {
        $nav.removeClass(fixedClass);
        $main.css('margin-top', '0');
      }
     });
    
    } else {
      $nav.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  });
})(jQuery);

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答3件

js
1  $(window).on('load resize', function(){
2    var _width = $(window).width();
3    if(_width >= 768){
4
5// ...
6
7    $(window).on('scroll', function() {
8
9// ...
10
11  });

　ここなんですが。

　条件成立してif文を通るたびにイベントが設定されます。条件不成立でもイベントの設定は消えません。

　ですので、一度でも条件成立すればスクロールイベントが発火しますし、何度か条件成立すればその数だけスクロールイベントが発火します。

　サイズのチェックをスクロールイベント内で行うのが、とりあえずお手軽な解決方法だと思います。

スクロールして一番上部に来たときに固定したい

　現在のコードをまるっと捨ててよければ、メディアクエリとスティッキーで書くのが、JavaScript不要でよさそうに思えます。

position: sticky;の仕組みや実際の使い方をやさしく解説 | コリス

投稿2022/08/10 05:53

編集2022/08/10 06:04

Lhankor_Mhy

総合スコア36117

退会済みユーザー

2022/08/10 06:04

>条件成立してif文を通るたびにイベントが設定されます。条件不成立でもイベントの設定は消えません。だから何？あんたはこれによってどの程度の負荷が掛かると思ってんの？

Lhankor_Mhy

2022/08/10 06:05

どちらさまですか？

退会済みユーザー

2022/08/10 06:08

どちらもくそもねえ、はじめましてだ。俺はなぁ、まずオマエノ指摘に対して疑問を抱いてんだよ。無駄な事はするな、それはよくわかる、だが実際それがどれだけの負荷になるかまでおめーしらんやろ？

退会済みユーザー

2022/08/10 06:10

無駄だからやるな、っていうのは、もっともだが、それをこのザコに言うにしては早いんだよ、わからんのや？

退会済みユーザー

2022/08/10 06:11

しかもおめぇさ、不動産屋書いとるやんけ？おめぇさ、本業に精出せや、なーに暇なことしてんねん。他にやるべきことないんか？

Lhankor_Mhy

2022/08/10 06:13

いや、「はじめまして」ではないですね。さっき気づきましたが。 https://teratail.com/questions/dfxqpbv21dqnzz あなたの質問に回答させていただいた者です。BAありがとう。 ↓この辺りの補足依頼欄も拝見しました。 https://teratail.com/questions/fpvog4rplzyhhf 「ゴミ」とか言うのは良くないですね。無駄な情報なので。 --- それで、私の回答のどの部分に負荷が生じると考えてらっしゃるんですか？

退会済みユーザー

2022/08/10 06:15

見るなっ！俺の過去を探るなっ！俺がどんな奴かしろうとするな！！！！！過去は過去や。鼻毛大魔神と同じ行動をとるな！！！

Lhankor_Mhy

2022/08/10 06:15

失礼、コメント行き違いました。そうですね、おっしゃるとおりです。では本業に戻りますね。

退会済みユーザー

2022/08/10 06:16

俺も探ってたわ、すまん。消えるわ、おつかれ

Lhankor_Mhy

2022/08/10 06:21 編集

はい、puura さん、お疲れ様です。クソ笑わせてもらいました、ありがとう。また別アカウントに輪廻転生したらお会いしましょう。

yamashita_1978

2022/08/10 06:30

Lhankor_Mhyさんコメントありがとうございます。 >サイズのチェックをスクロールイベント内で行うのが、とりあえずお手軽な解決方法だと思います。以下のように書き換えたみましたが、やはりウィンドウサイズを大きくしたり、小さくしたりすると前の設定（margin-top）が引き継がれて、おかしくなってしまいました。やはりどこか書き方が違うのでしょうか？ $(function() { var $main = $('.main'), $nav = $('.global-nav'), navHeight = $nav.outerHeight(), navPos = $nav.offset().top, fixedClass = 'fixed'; $(window).on('load scroll', function() { var _width = $(window).width(); if(_width >= 768){ var value = $(this).scrollTop(); if ( value > navPos ) { $nav.addClass(fixedClass); $main.css('margin-top', navHeight); } else { $nav.removeClass(fixedClass); $main.css('margin-top', '0'); } } else { $nav.removeClass(fixedClass); $main.css('margin-top', '0'); } }); }); >現在のコードをまるっと捨ててよければ、メディアクエリとスティッキーで書くのが、JavaScript不要でよさそうに思えます。こちらも検討したのですが、sticky状態のとき、CSSでスタイルをつけられないので、できればJSを使いたいんです。

Lhankor_Mhy

2022/08/10 06:38

navPos の中身がリサイズで更新されないと思いますが、それで大丈夫そうですか？ --- > sticky状態のとき、CSSでスタイルをつけられないコードがないので何とも言えませんが、一般論的には、内部にラッパー要素を作ってそちらにスタイルを当てるようにすれば、大抵のことはできると思いますよ。

yamashita_1978

2022/08/10 06:45

margin-topが悪さをしているので、 jsとcss（sticky）を足す方法を思いつきました。解決方法に記載させていただきます。ありがとうございました！

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

自己解決

JSの「margin-top」の挙動が複雑なので、JSとCSSを組み合わせることにしました。
JSでは、固定コンテンツにclassのみを追加。固定自体はCSSのstickyを使いました。
これでsticky状態でもスタイルを当てられます。結果的に考え方もシンプルになってよかったです。

$(function() {
  var $win = $(window),
      $nav = $('.global-nav'),
      navPos = $nav.offset().top,
      fixedClass = 'fixed';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > navPos ) {
      $nav.addClass(fixedClass);
    } else {
      $nav.removeClass(fixedClass);
    }
  });
});

投稿2022/08/10 06:49

yamashita_1978

総合スコア10