フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

CSSでヘッダーを上部に固定する方法

下記を参考に keyframesanimation を使って transform: translateX で横に移動するアニメーションを実装しました。

macOS High Sierra 10.13.6 の Safari 12.0 の環境で数回リロードして動作確認すると、数回1回アニメーションが動きませんでした。

iPhone8 iOS 12.0.1 でも同様にアニメーションが動きません。

iOSの場合は Safari だけではなく、Chrome でも同様に動作が不安定でした。(描画する前にCSSの値を計算できていない?)

原因は不明ですが、アニメーショのCSSだけを別ファイルにして、jQuery でHTMLの読み込みが完了してからCSSを読み込むようにすると改善されました。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
    var style = '<link rel="stylesheet" href="style.css">';
    $('head link:last').after(style);
});
</script>

参考:HTMLの読み込みが完了してから実行

同じように safari, iOS 環境でアニメーションが動かない、または不安定の方は試してみてください。

これで5時間消えました…;;

[紹介元] CSSタグが付けられた新着投稿 – Qiita CSSでヘッダーを上部に固定する方法

コメント

記事に戻る

コメントを残す