768px以下の時にスクロールのscriptを発動したい

Question

前提・実現したいこと

下記のscriptを768px 以下で動かしたいのですが追加スクリプトの書き方がよくわかりません。

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

スクロールした時に下記のスクリプトだとPCもSpも同じように動くのでSPにだけ設定したいのですが、上手く動かせません。

エラーメッセージ

### 該当のソースコード

<script> var startPos = 0,winScrollTop = 0; $(window).on('scroll',function(){ winScrollTop = $(this).scrollTop(); if (winScrollTop >= startPos) { if(winScrollTop >= 50){ $('#fh5co-logo').addClass('hide'); } } else { $('#fh5co-logo').removeClass('hide'); } startPos = winScrollTop; }); </script> <div id="fh5co-header"> <header id="fh5co-header-section"> <div class="nav-header"> <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a> <h1 id="fh5co-logo"><a href=“#”><img src="../images/logo.svg" ></a></h1> <nav id="fh5co-menu-wrap" role="navigation"> <ul class="sf-menu" id="fh5co-primary-menu"> <li><a href="../about.html">About</a></li> <li><a href=“../news.html">News</a></li> <li><a href=“../access.html">Access</a></li> <li><a href=“../event.html">Event</a></li> </ul> </nav> </div><!-- end nav-heade --> </header> </div><!-- END fh5co-heade --> <div id="contens"> </div>

### 試したこと

<script> $(function(){ var w = $(window).width(); var x = 768; if(w <= x) { var startPos = 0,winScrollTop = 0; $(window).on('scroll',function(){ winScrollTop = $(this).scrollTop(); if (winScrollTop >= startPos) { if(winScrollTop >= 50){ $('#fh5co-logo').addClass('hide'); } } else { $('#fh5co-logo').removeClass('hide'); } startPos = winScrollTop; }); </script> <script> var startPos = 0,winScrollTop = 0; $(window).on('scroll',function(){ 　　var w = $(window).width(); var x = 768; if(w <= x){ winScrollTop = $(this).scrollTop(); if (winScrollTop >= startPos) { if(winScrollTop >= 50){ $('#fh5co-logo').addClass('hide'); } } else { $('#fh5co-logo').removeClass('hide'); } startPos = winScrollTop; }); </script>

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

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

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/help#about-markdown
単に「768px以下」だけだと何が768pxか分かりません。要件として具体的に書いてください。
（そこがハッキリしてるならそのサイズを取るだけだとは思いますけど・・）

[d1-fujii]

すみませんwindow幅が768pxです。
下記の様なのを追加したいと思ったのですが、何処にどう入れたら良いかわかりません。
色々試しているのですが思うように動きませんでした。
宜しくお願い致します。

<script>
$(window).resize(function(){
var w = $(window).width();
var x = 750;
if (w <= x) {

});
} else {

});
}
});
</script>

[m.ts10806]

質問は編集できますので、質問に追記してください。
コメント欄ではマークダウンが使えませんし、デフォルト非表示なので回答に必要な情報が隠れてしまうことになります。

[m.ts10806]

再現確認のためにHTMLも必要ですね。
「色々試している思うように動かないコード」も提示されたほうが良いかと思います。

[退会済みユーザー]

あなたは、そーすこーどがよめますか？

[d1-fujii]

すみません、正直読めません。

[m.ts10806]

(2回目）
質問は編集できますので、質問に追記してください。
コメント欄ではマークダウンが使えませんし、デフォルト非表示なので回答に必要な情報が隠れてしまうことになります。

[d1-fujii]

何度も済みません、更新したつもりができていませんでした。

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[m.ts10806]

一番最初に書いたのですが…↓

コードはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/help#about-markdown

結構これ大事です。
平で張るとインデントが削られたりして「実際に質問者が作ったコード」ではなくなるので。

[d1-fujii]

いろいろ済みませんでした。

[m.ts10806]

焦らず急がず、確実に対応すれば大丈夫です。
質問者さんはどうか分かりませんが、こちらは特に急いでいません。
分かりやすい質問を書くことは多少面倒でもそちらのほうが確実に解決に向かいます。

[kei344]

解決済にしても本文を編集することが出来ますので、よろしくお願いします。

Answer 1

なんとか解決しました。

<script>
var startPos = 0,winScrollTop = 0;
$(window).on('scroll',function(){
    winScrollTop = $(this).scrollTop();
    if ($(window).width() <=768 && winScrollTop >= startPos && winScrollTop >= 50) {
        $('#fh5co-logo').addClass('hide');
    } else {
        $('#fh5co-logo').removeClass('hide');
    }
    startPos = winScrollTop;
});

</script>