質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.65%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,015

Raiden

score 19

前提・実現したいこと

スクロールに応じて上部に固定した水平メニューのスタイルがかわる機能を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などに位置をかえてみたりしましたが何もかわりませんでした。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

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

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

    $(window).scroll(function() {
        $(window).on('load resize', function() {
            $(window).on('load resize scroll', function() {
            });
        });
    });

    // 共通で使う変数はこの部分で宣言
    $(window).on('load resize', function() {
        // 初期化コード
    });
    $(window).scroll(function() {
        // スクロール時のコード
    });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/05 03:25

    ご指摘の通りでした。
    入れ子になっていてパフォーマンスも下がっていたようで、修正したらだいぶ軽くなりました。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.65%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る