ラック
Home > ブログ > 記事 > 2018年3月 > google翻訳の後ろにヘッダが隠れるのをどうにかする

google翻訳の後ろにヘッダが隠れるのをどうにかする

カテゴリ: ホームページ

Bootstrapを使ったサイトで、ヘッダ(ナビゲーションバー)にnavbar-fixed-topクラスを付与して上部に固定表示させている場合、google翻訳を付けて翻訳すると翻訳のバーの裏側にposition: fixed;しているヘッダが隠れてしまう現象に遭遇。

position: fixed;していなければ普通に下に落ちてくれるのですが……ということで、これを何とかしようと。


$(function() {
    //翻訳した場合の処理(翻訳バーの高さだけ下にずらす)
    translateBarAttachment();
    //翻訳した場合の処理(翻訳バーの高さだけ下にずらす)
    $(".navbar .navbar-brand").on("DOMSubtreeModified", function() {
        translateBarAttachment();
	});
});
 
//翻訳した場合の処理(翻訳バーの高さだけ下にずらす)
function translateBarAttachment() {
    var $navbar = $(".navbar");
    var $body = $("body");
    if($body.offset().top > 0){
        $navbar.css({
            "top": "40px"
        }); //翻訳バーの高さだけ下にずらす
    }
    else {
        $navbar.css({
            "top": "0"
        }); //翻訳バーの高さだけ下にずらすのを元に戻す
    }
}

こんな感じのjQueryを記述して解決しました。なおjQuery本体は3.2.1で。

参考

タグ: jQuery,トラブル対処,bootstrap

 



関連する記事一覧