GoogleTranslate（ウェブサイト翻訳ツール）のツールーバーによるフローティングメニューのズレを消す方法

みなさん、おはようございますこんにちはこんばんは！ハルです。
今回はGoogleTranslate（ウェブサイト翻訳ツール）に関する記事です。
私のサイトのようにフローティングメニューを導入されているサイトさんも多いと思います。ですが、いざ翻訳させてみると翻訳のツールーバーがメニューと被ってボタンが押せなくなったりして困った事になります。
ズレを解消したいと検索してみたのですが、設置方法の記事は多数あるのにズレに関しての記事がなかなかヒットしなかった為今回も自己解決して記事にまとめました。

もくじ

• コード
• まとめ
• 付録

コード

フローティングメニューのスクロール判定時の処理に上記コードを追加し、「offset」をフローティングメニューの現在位置に足すなどして差分を計算してあげるとズレが解消できます。
注意点として、翻訳を起動するとiframeで呼び出されるのですが、翻訳を✖ボタンなどで終了してもフレームは残ります。
内包しているクラスをdisplay:noneで見えなくしてるだけなので、翻訳ツールバー終了後も高さが残りフローティングメニュー上部に隙間が残った状態となります。 if($('.skiptranslate').css('display') == 'none'){
 var offset = 0;
} 上記コードの部分で内包しているクラスのdisplayを監視して、「offset」を0にする事で差分を元に戻しています。

まとめ

ツールバーの動き方さえ分かってしまえばこっちのものですね。
それでは今回はここまで。また次回更新時もお付き合い頂けるとうれしいです。
ありがとうございました！

付録

最後に、まだGoogleTranslateを導入していない来場者の方向けにコードの発行サイトを残しておきます。

<---------- 追記ここから ---------->
2019年に新規コードの発行を終了し、現在はコードを既に所持している人以外は使用出来ないようです。（2022/03/21現在）
サイトタイトルが少し変ですが、ほぼ同じようなサービスのサイトを発見しましたのでご紹介致します。
一般の方であれば、よほど大きいサイトでない限り無料ので大丈夫だと思います。
GTranslate
→GTranslate-ウェブサイト翻訳者：ウェブサイトを翻訳してください
<---------- 追記ここまで ---------->
GoogleTranslate（ウェブサイト翻訳ツール）のコード発行サイト
→ウェブサイト翻訳ツール - Google Translate

公開年月日：2018年02月22日
更新年月日：2022年03月21日