Q&A
下記のコードのように、footerはposition:stickyにより画面をスクロールしても
section内のbottom:20pxで表示されるように固定されております。
一方で、<span>footer</span>をクリックすると#footer_extraが
表示されるようになります。
ここで、#footer_extraをどのスクロール位置でも表示させたいのですが
うまくできません。具体的には定時のコードのように、stickyのpositionをとっているのに
例えばsectionの真ん中らへんで<span>footer</span>をすると下に見切れてしまいます。
やりたいこととしては
1)どこのスクロール位置でも
2)#footerは下部に固定配置されており
3)<span>footer</span>をクリックして表示される
4)#footer_extraは他の要素に影響されずすべて表示される、つまり
どのスクロール位置でもクリックしても#footer_extraはすべての範囲が表示され、<span>footer</span>要素を除いては、要素が押し出されて表示されない
ようにしたいと考えております。
他の要素をスクロール上、固定にするのであれば、モーダルウィンドウでも良いというご意見もあるかと思いますが、<span>footer</span>をタブのように使用したいので、slideToggleで実現したいと考えております。
ご助言をいただければ幸いです。
html
1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <section> 9 <div class="content">content_1</div> 10 <div class="content">content_2</div> 11 <div class="content">content_3</div> 12 <div id="footer"> 13 <span>footer</span> 14 <div id="footer_extra">added</div> 15 </div> 16
css
1section{ 2 height:350px; 3 background-color:red; 4} 5.content{ 6 margin: 0 auto; 7 width:100%; 8 height:90px; 9 margin-bottom:5px; 10 background-color:blue; 11} 12 13#footer{ 14 margin: 0 auto; 15 width:100%; 16 height:20px; 17 background-color:#fff000; 18 position:sticky; 19 bottom:20px; 20} 21#footer_extra{ 22 display:none; 23 width:100%; 24 height:100px; 25 background-color:pink; 26 z-index:100; 27}
Javascript
1$(function(){ 2 $('#footer').on('click',function(){ 3 $('#footer_extra').slideToggle('slow'); 4 }) 5})
回答1件
0
ベストアンサー
footer_extraがposition:stickyされたfooter内にあるからですよ
投稿2018/04/08 01:13
総合スコア120
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/08 06:02
2018/04/08 06:31
2018/04/08 06:39
2018/04/08 07:14