

ウェブサイトの制作初心者、初質問です。  
ページのヘッダーを画面の先頭にposition:fixedで固定していたのですが、  
サイトがスマホのみのレイアウトのためpcでみた時は少し大きく表示したいとのオーダーがあり、  
zoomプロパティはfirefoxで使えないためhtml要素にtransform:scale();を使って画面幅が768px以上の時は1.25倍で表示するようにしました。

[code]

    @media (min-width: 768px) {
        html {
            transform-origin: top center;
            transform: scale(1.25);
        }
    }
    
[/code]

もちろんtransformを設定してから知ったのですが親要素にtransformを設定すると子要素のposition:relativeが効かなくなる、とのことでjqueryを使って画面上部に固定しようと考えております。

ヘッダーと同階層でtransform:scale();する方法も試しましたが、ざっくり書くと

<ヘッダー>  
<本体>  
<フッター>

のようになっており、全部1.25倍すると本体とフッターの内容が被ってしまうためやめました。

しかしjqueryはさらに初心者であるため画面の上部を取得する方法すらわからず、ネットで調べてもposition:fixed前提の記事ばかりでなかなか目的の記事にたどりつけず、こちらで質問させていただきました。

まとめるとposition:fixedを使わず、transformの位置も動かさずにjqueryなどを使ってヘッダーを画面先頭に固定したいです。

初質問で何かと至らぬかもしれませんがどうぞよろしくお願いいたします。


CC BY-SA 4.0
2022-03-14T05:04:23.010
86826
2022-03-14T05:43:02.053
2022-03-14T05:43:02.053
51821
51821
question
javascript html css jquery wordpress
親要素にTransformを指定した場合の画面固定について