33410


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

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

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

[code]

    $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');
        } 
    });
    
[/code]

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

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

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

[code]

    $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');
            }
        }
    });
    
[/code]

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

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


CC BY-SA 3.0
2017-03-17T06:36:50.987
33385
2017-03-19T08:42:59.370
2017-03-17T07:13:49.983
4236
20135
question
javascript jquery
レスポンシブサイトでの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` メソッドがないのは当然です。

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

[code]

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

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

* * *

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

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

ぐらいはしましょう。


CC BY-SA 3.0
2017-03-19T08:42:59.370
33410
2017-03-19T08:42:59.370
8000
33385
answer