スクロール時にクラスを付与したい

スクロール時にヘッダーにクラスを付与させたいのですが、原因がうまく特定できないです。
ページを開いた時に少しでもスクロールしたら「fixed」のクラスが付与するようにしたいのですが
うまく動作しません。
ご確認お願いできますでしょうか

htmlは長くなるためヘッダーとフッター部分を貼り付けました。
jsは全部と抜粋部分に分けて貼り付けます。

html
1
2<!doctype html>
3<html>
4  <head>
5    <meta charset="utf-8">
6    <meta http-equiv="x-ua-compatible" content="ie=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8    <title><%= current_page.data.title || "Middleman" %></title>
9    <meta name="author" content="<%= current_page.data.companyname %>" />
10    <meta name="Copyright" content="<%= current_page.data.companyname %>" />
11    <meta name="description" content="このページは<%= current_page.data.companyname %>の「<%= current_page.data.title %>」に関するページです。">
12    <meta name="keywords" content="<%= current_page.data.keyword %>">
13    <meta property="og:title" content="<%= current_page.data.title %>"/>
14    <meta property="og:type" content="website"/>
15    <meta property="og:image" content="https://example.com/images/ogp/image.jpg"/>
16    <link rel="canonical" href="https://example.com/<%= current_page.data.directory %>">
17    <link rel="dns-prefetch" href="//example.com/">
18    <link rel="dns-prefetch" href="//code.jquery.com/">
19    <link rel="preconnect" href="//example.com/">
20    <link rel="preconnect" href="//code.jquery.com/">
21    <link rel="prefetch" href="/stylesheets/site.css">
22    <link rel="prefetch" href="/javascripts/site.js">
23    <meta property="og:description" content="このページは<%= current_page.data.companyname %>の「<%= current_page.data.title %>」に関するページです。"/>
24    <meta name="twitter:card" content="Summary with Large Image" />
25    <meta name="format-detection" content="telephone=no">
26    <link rel="apple-touch-icon" type="image/png" href="/images/favicon/apple-touch-icon-180x180.png">
27    <link rel="icon" type="image/png" href="/images/favicon/icon-192x192.png">
28    <!--  <link rel="manifest" href="/images/favicon/manifest.json"> -->
29    <%= stylesheet_link_tag "site" %>
30    <%= current_page.data.css %>
31
32  </head>
33  <body class="<%= page_classes %> preload">
34    <a name="top" id="top" class="anchor"></a>
35    <header class="header_class" id="header">
36      <h1 class="logo">
37        <img src="/images/common/logo.png" alt="暮らしをデザインする Design House  and U（アンド・ユー）">
38      </h1>
39      <nav class="gloval_menu">
40        <div class="flex">
41          <div class="menu_wrapper">
42            <div class="menu_block01">
43              <h3 class="en">Column</h3>
44              <ul>
45                <li><a class="menu_img" href=""><img src="/images/common/nav01.jpg" alt="#建築・住宅"></a><a class="menu_txt_link" href="">#建築・住宅</a></li>
46                <li><a class="menu_img" href=""><img src="/images/common/nav01.jpg" alt="#インテリア・デザイン"></a> <a class="menu_txt_link" href="">#インテリア・デザイン</a></li>
47                <li><a class="menu_img" href=""><img src="/images/common/nav01.jpg" alt="#植物・自然・ガーデン"></a><a class="menu_txt_link" href="">#植物・自然・ガーデン</a></li>
48              </ul>
49            </div>
50            <div class="menu_block02">
51              <h3 class="en">About us</h3>
52              <ul>
53                <li><a href="">会社概要</a></li>
54                <li><a href="">水蔵(災害住宅)について</a></li>
55                <li class="menu_contact"><a href="">お問い合わせ</a></li>
56              </ul>
57            </div>
58          </div>
59        </div>
60        <div class="gloval_btn">
61          <span></span>
62          <span></span>
63          <span></span>
64        </div>
65      </nav>
66    </header>
67    <%= yield %>
68    <footer>
69      <p><img src="/images/common/footer_logo.jpg" alt="暮らしをデザインする Design House  and U（アンド・ユー）"></p>
70      <div class="flex">
71        <nav class="footer_menu">
72          <div class="column_cat">
73            <h5 class="en">Column Categgories</h5>
74            <ul class="f_cate_list">
75              <li><a href="">#建築・住宅</a></li>
76              <li><a href="">#インテリア・デザイン</a></li>
77              <li><a href="">#植物・自然・ガーデン</a></li>
78            </ul>
79          </div>
80          <div class="about_menu">
81            <h5 class="en">About Us</h5>
82            <ul class="f_about_list">
83              <li><a href="">会社概要</a></li>
84              <li><a href="">水蔵(災害住宅)について</a></li>
85              <li class=""><a href="">お問い合わせ</a></li>
86            </ul>
87          </div>
88        </nav>
89      </div>
90    </footer>
91    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
92    <script src="/javascripts/slick.js"></script>
93    <%= javascript_include_tag "site" %>
94  </body>
95</html>

javascripts
1//ウィンド幅の検知、タブレットのブレークポイント
2var windowWidth = $(window).width();
3var mqsp = 896;
4
5//ページ読み込み時に作動
6$(window).on('load',function(){
7    //別ウィンドで開く
8    $("a[href^=https]").not('[href*="'+location.hostname+'"]').attr("target","_blank");
9    $("a[href^=http]").not('[href*="'+location.hostname+'"]').attr("target","_blank");
10    $('a[href$=".pdf"]').attr('target', '_blank');
11}); 
12
13//ハンバーガーメニュー
14$(".gloval_btn").click(function () {
15    $(this).toggleClass("active");
16    $("nav.gloval_menu").toggleClass("active");
17});
18
19//スムーズスクロール
20$('a[href^="#"]').click(function(){
21    var speed = 800;
22    var href= $(this).attr("href");
23    var target = $(href == "#" || href == "" ? 'html' : href);
24    var position = target.offset().top;
25    $("html, body").animate({scrollTop:position}, speed, "swing");
26    return false;
27});
28
29window.onload = function(){
30    $('.slide').slick({
31        dots:true,
32        pauseOnHover: true,
33        pauseOnDotsHover: true,
34        cssEase: 'ease-out',
35        arrows:true,
36        autoplay:true,
37        autoplaySpeed: 30000, // 最初のスライドの秒数
38    });
39  };
40
41//スクロールにてクラスを付与
42$(window).scroll(function () {
43    var window_position = $(window).scrollTop();
44    if(window_position > 20) {
45         $("header").addClass("fixed");
46    }else{
47         $("header").removeClass("fixed");
48    }
49});

javascripts
1スクロール付与のjsです。
2//スクロールにてクラスを付与
3$(window).scroll(function () {
4    var window_position = $(window).scrollTop();
5    if(window_position > 20) {
6         $("header").addClass("fixed");
7    }else{
8         $("header").removeClass("fixed");
9    }
10});

以上になります。
不足している情報などお知らせください。
申し訳ありませんがご確認お願いいたします。

hatena19

2020/12/15 11:01

提示のコードでfixedクラスは付与されてます。サンプルを作成して検証ツールで確認しました。どのように確認しましたか。

yesma

2020/12/15 11:15

ご確認ありがとうございます。 middlemanというrubyで動くフレームワークで開発しているのですが、そのローカルサーバーでプラウザ確認をしています。原因はもしかしたら別にあるかもしれませんね

hatena19

2020/12/15 11:19

コード自体には問題はないと思います。 jQueryは読み込まれているか。 console.logを入れてコードが実行されているか確認する。検証ツールのコンソールでエラーが出ていないか確認する。などのデバッグ作業を行ってください。

FKM

2020/12/16 01:20

使用しているRailsのバージョンによっては、jQueryを使用するには準備が要ります

yesma

2020/12/16 01:30

jQueryですが、他のslickやハンバーガーメニューなどにも利用していて、動いているんですよね。。。今回の投稿した部分のみがうまく機能しない状態です。ご連絡ありがとうございます。

hatena19

2020/12/16 01:40

検証ツールでクラスが追加されているか確認はしましたか。 CSSに間違いがある可能性は確認しましたか。

yesma

2020/12/16 02:22

はい、検証ツールにて確認しておりますが、まだクラスの付与がされないですね。もう一度見直してみます。

FKM

2020/12/16 02:26

イベントによって変数windows_positionの値が変動しているか確認してみてください。

yesma

2020/12/16 02:37

すみませんこちらの確認方法は、if(window_position > 0)にある「0」の値を変更して確認する等理解で大丈夫でしょうか？

hatena19

2020/12/16 05:00

検証ツールでステップ実行するとか、 console.log(windows_position) でコンソールに出力するとか、で確認ですね。

yesma

2020/12/16 10:51

度々すみません。コンソールロゴで確認する時は以下の記述でもあってますかね？ご確認お願いいたいします。 $(window).scroll(function () { var window_position = $(window).scrollTop(); if(window_position > 0) { //$("header").addClass("active"); console.log(window_position); }else{ //$("header").removeClass("active"); } });