Q&A
こちらの質問 で質問させていただいた内容の続きではあるのですが、
こちらに記載されているようなコードの状態で基本的な挙動は変えずに、右スクロールした際にフッターの位置だけ変えないようにする事は可能でしょうか？
念の為以下にもコードを記載しております。
色々と検討しましたが、良い方法が見つからずもし思いつく方いらっしゃいましたらご教示いただけますと幸いです。
html
1<body> 2 <div class="first"> 3 <div id="header"> 4 ここにヘッダーが入ります。 5 </div> 6 <div class="second"> 7 <div class="body"> 8 縦にスクロールしたい 9 </div> 10 </div> 11 <div id="footer"> 12 ここにフッターが入ります。 13 </div> 14 </div> 15</body>
css
1.first { 2 background-color:#eee; 3 width: 1000px; 4 height: 500px; 5 margin: 0 auto; 6 overflow-x: scroll; 7} 8.second { 9 background-color:#50FFFF; 10 width: 1500px; 11 height: 500px; 12 margin: 0 auto; 13 overflow-x: scroll; 14} 15#header{ 16 width: 1500px; 17 background-color:#dfa3a3; 18 z-index:9999; 19 height:50px; 20 position: sticky; 21 top: 0; 22} 23.body{ 24 overflow-x: scroll; 25 background-color: #BEC38A; 26 width: 1500px; 27 height: 200px; 28} 29#footer{ 30 width: 100%; 31 background-color:#5264bf; 32 z-index:9999; 33 height:50px; 34}
回答1件
0
ベストアンサー
ご掲示いただいた「#footer」に「position:sticky」、「left:0」を追加しました。
ご希望に沿う動作になるでしょうか？
css
1#footer{ 2 width: 100%; 3 background-color:#5264bf; 4 z-index:9999; 5 height:50px; 6 position:sticky; 7 left:0; 8}
他者への質問で問題が解決した際、その解決手法を理解することが大事かと思います。
今一度、「position:stikcy」について、ドキュメントをご参照いただければと思います。
MDN Web Docs (position)
投稿2022/06/02 08:55
総合スコア1005
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/06/02 09:12