前提
下記サンプルをご確認いただけますでしょうか。
サンプルA
フッターにある「表示」ボタンを押すと、フッターのコンテンツが下から上へ移動しながら表示されます。
上記のサンプルAは一応私の希望通りの動きになっています。
発生している問題
上記サンプルのフッター上、「コンテンツA」のコンテンツ量が増えると、フッターの領域が画面外にはみ出てしまい、フッターの「表示」ボタンが押せなくなってしまいます。
下記のサンプルは、コンテンツ量が多くフッターがはみ出してしまった場合のサンプルです。
サンプルB
実現したいこと
「コンテンツA」のコンテンツ量が増えても、「コンテンツA」の後にフッターのコンテンツを表示できるようにしたいです。
また、フッターコンテンツの表示と非表示によってスクロールバーが動くことなく、サンプルAのフッターのようにあらかじめフッターコンテンツを表示する領域を常に確保した状態にしたいです。
該当のソースコード
html
1<body> 2 <div id="wrap"> 3 <div id="block"> 4 <h2>コンテンツA</h2> 5 <p>コンテンツ</p> 6 <p>コンテンツ</p> 7 <p>コンテンツ</p> 8 <p>コンテンツ</p> 9 <p>コンテンツ</p> 10 <p>コンテンツ</p> 11 <p>コンテンツ</p> 12 </div> 13 <footer> 14 <input type="checkbox" id="check" /> 15 <label for="check"> 16 <p id="visibleBtn">表示<p> 17 </label> 18 <div id="footerCont"> 19 <p>コンテンツ</p> 20 <p>コンテンツ</p> 21 </div> 22 </footer> 23 </div> 24</body>
css
1body { 2 background: black; 3 overflow: hidden; 4} 5p { 6 margin-bottom: .5rem; 7} 8#wrap { 9 text-align: center; 10 position: fixed; 11 top: 0; 12 left: 0; 13 width: 100vw; 14 height: 100vh; 15 display: flex; 16 flex-direction: column; 17 box-sizing: border-box; 18 padding: 1rem 5%; 19 overflow-y: auto; 20} 21#block { 22 background: tomato; 23 width: 100%; 24 box-sizing: border-box; 25 margin: auto; 26 padding: 1rem 0; 27} 28 29footer { 30 background: steelblue; 31 padding: 1rem 0; 32 overflow-y: hidden; 33} 34#check{ 35 display: none; 36} 37#check:checked ~ * p { 38 transform: translateY(0); 39} 40#check:checked ~ * div { 41 visibility: visible; 42 transform: translateY(0); 43} 44#visibleBtn { 45 background: white; 46 width: 3rem; 47 margin: 0 auto; 48 padding: .3rem; 49 transform: translateY(4rem); 50 transition: .2s; 51 cursor: pointer; 52} 53#footerCont { 54 visibility: hidden; 55 transform: translateY(4rem); 56 transition: .2s; 57} 58 59
試したこと
footerのスタイルに設定してあるoverflow-y: hidden;
を削除すると、コンテンツ量が増えてもサンプルAのフッターのように、フッターコンテンツを表示できる分の領域を確保できました。
しかし、フッターコンテンツを表示するとフッター下の余白が減りページ全体のサイズが変わるためか、スクロールバーの位置が変わってしまいます。
下記サンプルはoverflow-y: hidden;
を削除した場合のサンプルです。
サンプルC
追記 ループアニメーション追加
ループアニメーションのコピペ元
CodePen Home
Star animation CSS
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/19 00:17
2020/01/19 00:52
2020/01/19 01:04
2020/01/19 01:13
2020/01/19 02:50
2020/01/19 04:12