Q&A
ご覧いただきありがとうございます。
現在レスポンシブサイトを制作しております。
下記の問題に関して困っております。ご教授いただけましたら幸甚に存じます。
[現状]
・viewportを設定したが余白が出てしまったため、やむ終えずコンテンツ部分をwrapperで内包、overflow:hidden; を設定。
[やりたいこと]
・グリーバルメニューに position:sticky を 使用してスクロール追従にしたい。
[問題]
・親要素に overflow:hidden; が設定されているため position:sticky が無効になる。
・なるべくjsは使わずに解決したい
何か良い解決策はありますでしょうか。
よろしくお願いいたします。
HTML
1<html> 2<head> 3 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 4</head> 5<body> 6 <div id="wrapper"> 7 <nav><!-- メニュー --></nav> 8 </div> 9</body> 10</html>
CSS
1#wrapper{ 2 width:100%; 3 overflow:hidden; 4} 5nav{ 6 position: sticky; /* 効かない */ 7}
回答1件
0
「スクロール追従」が何を意図しているのかがコードだけだとちょっとわからないです。
stickeyを使わなくたってスクロール追従なんて実現方法自体は過去にも色々あるわけですしね。
viewportで余白が出たのをごまかしてるのも少々気に入らないです 汗
やりたいことはグローバルメニューの上部固定とかそういうことなのでしょうか？
もう少し具体的に何がどうなったらどうしたいのかを明確にすると誰かが答えてくれるかもしれません。
（例としてこの動きが実現したいとしてURLを貼るとか）
個人的に感じるのはstickeyを使わないといけない理由は何ですか？って言う感じですかね？
投稿2018/07/10 12:51
総合スコア1614
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。