JavaScript スクロール時にクラスを付与するプログラムについて

Question

前提・実現したいこと

下記2つのプログラムにて、
①アクセス時とスクロール時にadd_class_in_scrolling()を実行し、画面内に指定要素がある場合はclassを付与
②画面スクロール時にnav要素にfixedクラスを付与し、メニューバーを上部に固定
の機能を実装しています。

それぞれ個別だと問題なく動くのですが、
同じjsファイル内に置いた時に下記エラーが発生し、
②の機能が動作しなくなります。
解決方法をご教授いただけますと幸いです。

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

Uncaught TypeError: Cannot read property 'top' of undefined at add_class_in_scrolling

該当のソースコード①

    $(window).on('load scroll', function () { 
        add_class_in_scrolling($('.hoge'));
    });
    function add_class_in_scrolling(target) {
        var winScroll = $(window).scrollTop();
        var winHeight = $(window).height();
        var scrollPos = winScroll + winHeight;
        if (target.offset().top < scrollPos) {
            target.addClass('hogehoge');
        } else {
            ;
        }
    };

該当のソースコード②

    $(function () {
        var offset = $('.nav').offset();

        $(window).scroll(function () {
            if ($(window).scrollTop() > offset.top) {
                $('.nav').addClass('fixed');
            } else {
                $('.nav').removeClass('fixed');
            }
        });
    });

Comments

[kei344]

エラーが出るコードも質問文に追記してください。

[pan_x]

ありがとうございます。
エラーはソースコード①の add_class_in_scrolling($('.hoge'));
部分に対して出ているようです。
エラーメッセージは下記の通りです。
Uncaught TypeError: Cannot read property 'top' of undefined at add_class_in_scrolling

[kei344]

質問本文を読んで、「①②と別のプログラムを実装して、それは動いている状態で、一緒に使うと動かない」と読みとりました。なので、「①」「②」「①②」のコードがあったほうがよいのでは？

[pan_x]

ありがとうございます。
「個別だと動く」というのは
・別のjsファイルに記載した場合　や
・どちらか片方をコメントアウトなどで削除した場合　　です。

なので仰る①②のコードは単純に①＋②というイメージです。
言葉足らずで失礼致しました。

Answer 1

ご提示されているコードで問題なく動くようですので、おそらく単純な記述ミスではないかと思われます。
エラーの内容は「undefinedにあるtopが読み込めない」ということなので、例えば

add_class_in_scrolling($('.hoge'));

の'.hoge'とするところを'hoge'のように.を書き忘れてしまったりということはありませんか。

Comments

[pan_x]

回答ありがとうございます！
見返したところ問題はないようでした。
また、別の方の回答により無事解決致しましたが
大変参考になりました。感謝致します。

Answer 2

$('.hoge') が無い、もしくは準備前の場合はそのエラーが出ます。
全体がわからないので最低限エラーが出なくなる方法くらいしか提示できませんが、下記のようにしてみてください。

if ( target.offset() && ( target.offset().top < scrollPos ) ) {

Comments

[pan_x]

回答ありがとうございます！ご指示をいただきましたコードを追記しましたところ、
無事解決しました。少ない情報から解決まで導いていただき感謝致します。