【Rails/jQuery】turbolinks をオフにしないままで、.hover を発火させたり.offset().top を取得したい

Question

RailsでTubolinksをオンにしてjQueryを使用する場合、通常通りの記述ではreadyが動かないということがわかったため、その対策を記入しました。
それによってTubolinksをオフにせずともいくつかのjsファイルはうまく動作したのですが、以下の2機能についてはreadyがうまく発火していないようで、ページを再読み込みしないと動作しません。

今回実装したい機能は以下の2点です。
1.「#fixMenu」の固定
2.「.MenuBody」の表示切り替え

まず1.について。

var ready;
ready = function() {

$(document).ready(function() {
  var nav    = $('#fixMenu'),
      offset = nav.offset();

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

 };
$(document).ready(ready);
$(document).on('page:load', ready);

上記の記述でreadyの対策はできているかと思うのですが、ページ遷移後にはうまく動作せず、「Uncaught TypeError: Cannot read property 'top' of undefined」とエラーが出てしまいます。

また、2について、

var ready;
ready = function() {
 $(function() {
    $('.toggleMenu').click(function() {
      if ($('.MenuBody').css('display') == 'block') {
        $('.MenuBody').fadeOut('800');
      }else{
        $('.MenuBody').slideDown('1000','swing');

      }
    });
    $('.toggleMenu,.MenuBody').hover(function(){
      over_flag = true;
    }, function(){
      over_flag = false;
    });
    $('body').click(function() {
      if (over_flag == false) {
        $('.MenuBody').fadeOut('800');

      }
    });
  });
};
$(document).ready(ready);
$(document).on('page:load', ready);

こちらも同様に、ページ遷移後はうまく動作せず、再読み込みすればうまく動作します。
ページ遷移後は、「.MenuBody」は上から降りてはくるのですが、降りてくると同時にフェードアウトして消えてしまいます。
おそらく「.hover」の発火がうまくいってないのではないかと思いますが、「Uncaught ReferenceError: over_flag is not defined」というエラーが出ています。

jquery.turbolinksを使用しても同様の結果でした。
どのようにすればこれらのjQueryを正常動作させることができるでしょうか。

ご回答よろしくお願いいたします。

---

1. について、hello-world様から頂いた以下の回答で動作しました。

(function(){
  var  offset;

  $(window).scroll(function () {
    var nav    = $('#fixMenu');
    if(offset && $(window).scrollTop() > offset.top - 20) {
      nav.addClass('fixed');
    } else {
      nav.removeClass('fixed');
    }
  });

  $(document).on('ready page:load', function(){
    offset = $('#fixMenu').offset();
  })
})();

Answer 1

var ready;
ready = function() {
  var nav    = $('#fixMenu'),
      offset = nav.offset();

  $(window).scroll(function () {
    if($(window).scrollTop() > offset.top - 20) {
      nav.addClass('fixed');
    } else {
      nav.removeClass('fixed');
    }
  });
};
$(document).ready(ready);
$(document).on('page:load', ready);

です。readyやon(page:load)に渡す関数の中でさらにreadyに渡してもうまくいきません

---

改善案

$(window).scroll(function () {
  var nav    = $('#fixMenu'),
      offset = nav.offset();
  if($(window).scrollTop() > offset.top - 20) {
    nav.addClass('fixed');
  } else {
    nav.removeClass('fixed');
  }
});

---

案2

(function(){
  var offset;

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

  $(document).on('ready page:load', function(){
    offset = $('#fixMenu').offset();
  })
})();

---

2.「.MenuBody」の表示切り替え

1. イベントの登録がおかしかったのを修正しました。$(document).on('ready page:load', function(){
2. アニメーションの途中で消えるということだったので、アニメーションが完了してからcanFadeクラスを追加するようにした
3. over_flag変数が正しく宣言されていなかったので、代わりにisHoverクラスとして要素に持たせた

$(document).on('ready page:load', function(){
  $('.toggleMenu').click(function() {
    if ($('.MenuBody').css('display') != 'block') {
      $('.MenuBody').slideDown('1000','swing', function() {
        $('.MenuBody').addClass('canFade');
      });
    } else if($('.MenuBody').hasClass('canFade')) {
      $('.MenuBody').fadeOut('800');
    }
  });
  $('.toggleMenu,.MenuBody').hover(function(){
    $('.MenuBody').addClass('isHover');
  }, function(){
    $('.MenuBody').removeClass('isHover');
  });
  $('body').click(function() {
    if ($('.MenuBody').hasClass('isHover') == false && $('.MenuBody').hasClass('canFade')) {
      $('.MenuBody').fadeOut('800');
    }
  });
});

Comments

[jusco]

ご回答有難うございます！
readyを減らして、教えていただいたとおりに記述してみましたがうまく動作しませんでした(T_T)

[hello-world]

> 上記の記述でreadyの対策はできているかと思うのですが、ページ遷移後にはうまく動作せず、「Uncaught TypeError: Cannot read property 'top' of undefined」とエラーが出てしまいます。

まだこのエラーがでているのなら、offset が undefinedだというエラーなので

var nav = $('#fixMenu'),
offset = nav.offset();

のすぐ下で
console.log(nav, offset);
などして、値を確認するのはどうでしょうか。

[jusco]

ご回答有難うございます。

console.log(nav, offset);

を記入したところ、

[div#fixMenu, context: document, selector: "#fixMenu"] Object {top: 270, left: 842}

このように値が取得できてはいるようなのですが、ページ遷移後にリロードを行わない場合、

Uncaught TypeError: Cannot read property 'top' of undefined(anonymous function)

といったエラーメッセージが出てしまいます。

ページをリロードすることでこのエラーは消え、通常通りにjqueryが作動します…。

[hello-world]

追記しました。
scrollイベントは、readyを待たずすぐに登録しても問題ないので、この方法でどうでしょう

[jusco]

ご回答ありがとうございます。

早速試してみたところ、ページ遷移後でもすぐに動作辞退は確認できました！
しかし、スクロールすると、固定部分が点滅したような表示になり、非常にカクカク動いているように見えてしまっています。
時には消えてしまうこともあります・・・。

[hello-world]

カタカタするということは、position: fixed がうまく動いていないということですよね？
`fixed` クラスでは`position: fixed`が指定されているのでしょうか？

何かのせいで、`fixed`クラスがついたり消えたりということはありませんか？
if($(window).scrollTop() > offset.top - 20) {
　　nav.addClass('fixed');
　　console.log("add")
} else {
　　nav.removeClass('fixed');
　　console.log("remove")
}
こんな感じのコードでログ中に removeが混じったりということはありませんか？

[jusco]

おっしゃる通りで、fixedクラスにはそのような指定をしています。
確認したところ、スクロールすると、removeとaddがなんども繰り返しでログとして出ています。

元々の記述では、画面遷移後は動作しないものの、リロードすればadd,removeが交互に動作するということはなく、うまく動作していました。
しかし、リロードを待たずに登録する方法では、画面遷移後は動作するものの、add,removeが交互に動作してしまっています。

[hello-world]

追記しました。これならどうでしょう

[jusco]

(function(){
var offset;

$(window).scroll(function () {
var nav = $('#fixMenu');
if(offset && $(window).scrollTop() > offset.top - 20) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});

$(document).on('ready page:load', function(){
offset = $('#fixMenu').offset();
})
})();

ご回答いただいたものを元に、5行目に「var nav = $('#fixMenu');」を追記することでうまく動作しました！ありがとうございましたm(__)m

もしよろしければ、2.についてもなにか分かりましたら教えて頂けると幸いです…m(__)m

[hello-world]

質問2について追記しました。こんな感じでどうでしょうか。

[jusco]

ご回答いただいた内容で完全に動作の確認が取れました！！
最後までご丁寧にお付き合い頂きまして、誠にありがとうございました…！！m(__)m

Answer 2

Turbolinksを有効にしていると、windowオブジェクトはページ遷移しても変化しませんので、ページ遷移のたびに$(window).scrollイベントをセットしていると、どんどん溜まってきてしまいます。前のページにあった#fixMenuを指したままのjQueryオブジェクトもクロージャ内に残って、うまく動作しません。

ということで、

1. 最初に一度だけ$(window).scrollへイベントをセットして、その中では$('body').trigger('window_scrolled');のようにカスタムイベントを中継するだけにする
2. readyとページ遷移の両方で駆動する関数の中で、$('body').on('window_scrolled')とカスタムイベントを拾う

という流れがいいのではないかと思います。

Comments

[jusco]

ご回答有難うございます！
指針を示して頂いてありがとうございます。

流れはわかったのですが、実際にそれをどのように記述するのかがわかりません・・・。
お手すきの際に、具体的なコードを教えて頂けないでしょうか。

よろしくお願い致しますm(__)m