レスポンシブサイトでのjqueryのリサイズ用コードの書き方

投稿者: Anonymous

お世話になっております。

各セクションが画面100%のシングルページサイトを制作しているのですが、

jqueryで、
2つめのセクションが見えている間のみクラスにfixedを付け、それ以外の場合は外すというふうにしたくて、下記のように書きました。

$window.on('scroll', function() {
    var firstHeight = $('#home').innerHeight(),  // 1番めのページの高さを取得
        secondHeight = $('#concept').innerHeight(), // 2番めのページの高さを取得
        scrollToImage = firstHeight + secondHeight; // 2つを合わせたページの高さを取得

    // 2番めのページが表示されている間のみfixedを付ける
    if ($window.scrollTop() >= firstHeight && $window.scrollTop() <= scrollToImage) {
        $('#img-catch').addClass('fixed');
    } else {
        $('#img-catch').removeClass('fixed');
    } 
});

これ自体は普通に動きます。
そこで、これにタブレット、スマホでは適応しないように

  • 960px以上の場合のみ適応
  • PCのウインドウをリサイズした場合に960pxを境に有効にしたり無効にしたり

というのを付け加えたくて下記のように追加したのですが、

$window.on('scroll resize', function() {
    var firstHeight = $('#home').innerHeight(),
        secondHeight = $('#concept').innerHeight(),
        scrollToImage = firstHeight + secondHeight;

    if ($window.width() >= 960) {
        if ($window.scrollTop() >= headerHeight && $window.scrollTop() <= scrollToImage) {
            $('#img-catch').addClass('fixed');
        } else {
            $('#img-catch').removeClass('fixed');
        }
    } else {
        if (('#img-catch').hasClass('fixed')) {
            $('#img-catch').removeClass('fixed');
        }
    }
});

fixedが付いている状態で960px以下にリサイズした場合、fixedが消えてくれません。
わかる方いらっしゃればご教授ください。

またjquery初心者でまだコードの書き方が曖昧です。
もっとスマートな書き方があれば合わせてよろしくお願いいたします。

解決

Uncaught TypeError: "#img-catch".hasClass is not a function というエラーが出ていると思うのですが、「"#img-catch".hasClass を関数として呼び出したが、これは関数ではない」という意味です。TypeError: ... is not a function という形を覚えましょう。

英語が理解できなくても、"#img-catch".hasClass と表示されていることに違和感を覚えましょう。hasClass はjQueryオブジェクトに対して呼び出したはずで、#img-catch という文字列に対して呼び出したつもりはないですよね?文字列に hasClass メソッドがないのは当然です。

では、エラーが出ている個所を見てみましょう。
※コンソールの右端に表示されている行番号をクリックすると当該行に飛びます

        if (('#img-catch').hasClass('fixed')) {
            $('#img-catch').removeClass('fixed');
        }

('#img-catch').hasClass('fixed') に何が足りないか、気づきましたか?


うまく動かないとあきらめる前に、

  • エラーが出ていれば、その内容を理解したり、検索したり、発生個所を見直す
  • エラーが出ていなければ、そもそもその行が実行されていない可能性を考える
    (前後に console.log() を入れたり、ブレークポイントを仕込んだり)

ぐらいはしましょう。

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *