こんにちは、お世話になっています。
今日は図を用意しました。
現在作成中のページの大まかなものになります。
仕組みとしてはheaderにあるボタンを押すと、それに対応するブロック要素(z-index:2と1の物)が表示されるというものになります。
この仕組みを使用し一ページ内に複数ページを作っています。
ここで、問題となったのがそれぞれのブロック要素によってheightが違うということでした、これによりz-index1で表したような図の下にある余白がz-index2を見た際生じます。
この点について、z-index2を見た際この余白が消えるようにしたいのですが、いい案が思いつきません。
よろしくお願いします。
<div id="newsHP" style="position:absolute; top:25px; opacity:0; z-index:1; width:100%; min-height:1562px; height:auto;">要素内容</div>
これが現在それぞれのブロック要素に指定しているcssです
$(".NEWS").click(function(){ setTimeout(function(){ $('#navigation').animate({ top:-50, opacity:0, },1000); },100); setTimeout(function(){ $("ほかのブロック要素").animate({ zIndex:1, opacity:0, },800); $("html,body").animate({scrollTop:0},'slow'); },1100); setTimeout(function(){ $("#newsHP").animate({ opacity:1, zIndex:13, },900); },1900); setTimeout(function(){ $('#navigation').animate({ top:00, opacity:1, },1000); },2800); });
が具体的な変化させるJSファイルにないります。
回答1件
あなたの回答
tips
プレビュー