デベロッパーツールが表示されたときのみ動くJSを表示されてなくても動くようにしたいです

前提・実現したいこと

スクロールに応じて上部に固定した水平メニューのスタイルがかわる機能をJSで作りました。
menu
works
about us
contact
のような順でスクロールするとコーナーが進む、いわゆるランディングページのような作りです。
スクロールをして該当のコーナーが表示されると上部メニューにCSSスタイルが適用されるようにしたいです。

発生している問題

他のJSファイルは動くのですが、このJSファイルだけ動きません。
原因を確かめようとChromeでデベロッパーツールを開くと、なんとこの機能が動き出します。
書いたとおりにスクロールに応じて該当のメニューのスタイルがかわります。
該当のソースコードにエラーは出ません。
ブレークポイントを置いてステップ実行させても、特に問題は見当たりません。
デベロッパーツールを閉じた後も動きます。
しかし、更新するとまた同じ問題がおきて動きません。

該当のソースコード

index.html

<!DOCTYPE html>
<nav id="page-top" class="navbar navbar-inverse navbar-fixed-top header-change">
    <div class="container-fluid">
        <!-- ヘッダー部分 ================ -->
        <div class="navbar-header">
            <a class="navbar-brand" href="#top">
                <img class="navLogo" src="img/logo.png">
            </a>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_target">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        </div>
     
        <div class="collapse navbar-collapse" id="nav_target">
            <ul class="nav navbar-nav">
               
                <li id="list02" class="menu-list"><a href="#news">NEWS</a></li>
                <li id="list03" class="menu-list"><a href="#workstop">WORKS</a></li>
                <li id="list04" class="menu-list"><a href="#aboutus">ABOUT</a></li>
                <li id="list05" class="menu-list"><a href="#contact">CONTACT</a></li>

            </ul>
          

            <ul class="nav navbar-nav navbar-right">

                <li><a href="#"></i></a></li>

                <li><a href="#" target="_blank"><i class="fab fa-youtube"></i></a></li>

            </ul>
        </div>
    </div>
</nav>

style.scss

    .current {
        color: indigo;
        font-weight: 900;
    }

naveffect.js

$(function() {
    var topBtn = $('#page-top');
    $("#page-top").addClass("header-change");
    $(window).scroll(function() {




        $(window).on('load resize', function() {
            var pos01 = 0;
            var pos02 = Math.round($("#news").offset().top);
            var pos03 = Math.round($("#workstop").offset().top);
            var pos04 = Math.round($("#aboutus").offset().top);
            var pos05 = Math.round($("#contact").offset().top);

            $(window).on('load resize scroll', function() {
                var posScroll = $(window).scrollTop() + (window.innerHeight / 2);
                if (posScroll <= pos01) {
                    $('.menu-list').css('background-color', 'transparent');
                    $(".nav li").removeClass('current');
                } else if (pos02 <= posScroll && posScroll < pos03) {
                    $('.menu-list').css('background-color', 'transparent');
                    $(".nav li").removeClass('current');
                    $("#list02").addClass('current');
                } else if (pos03 <= posScroll && posScroll < pos04) {
                    $('.menu-list').css('background-color', 'transparent');
                    $(".nav li").removeClass('current');
                    $("#list03").addClass('current');
                } else if (pos04 <= posScroll && posScroll < pos05) {
                    $('.menu-list').css('background-color', 'transparent');
                    $(".nav li").removeClass('current');
                    $("#list04").addClass('current');
                } else if (pos05 <= posScroll) {
                    $('.menu-list').css('background-color', 'transparent');
                    $(".nav li").removeClass('current');
                    $("#list05").addClass('current');
                }
            });



        });

    });
});

試したこと

Firefoxでも同じ事が起こりました。

上にもかきましたが、デベロッパーツールを開いてステップ実行をして何かエラーが出ないか探りましたが出なかったです。

<script src="naveffect.js"></script>

htmlでは上記を読み込んでいるので、headerなどに位置をかえてみたりしましたが何もかわりませんでした。

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

回答1件

ベストアンサー

イベントの中でイベントを登録しない。するならきちんとイベントを外しましょう。

スクロールイベントはスクロール中何度も呼ばれます。
そのたびに「'load resize'」イベントを追加している状態です。
（デベロッパーツールを開かなくてもブラウザのウィンドウサイズを変更したら動くと思われます）

js
1    $(window).scroll(function() {
2        $(window).on('load resize', function() {
3            $(window).on('load resize scroll', function() {
4            });
5        });
6    });
7```↓
8```js
9    // 共通で使う変数はこの部分で宣言
10    $(window).on('load resize', function() {
11        // 初期化コード
12    });
13    $(window).scroll(function() {
14        // スクロール時のコード
15    });