スティッキーサイドバーと固定コラム

私は、ヘッダーにヒットしたときにサイドバーを固定しましたが、divをこのサイドバーの下に100 pxスティッキーにしたいときは、position：fixedを使用してdivを固定しますブラウザウィンドウ。代わりに、サイドバーに対して固定する必要があります。スティッキーサイドバーと固定コラム

コードは非常に混乱しています。私が必要とするすべての組み合わせを作ることがわかったのは、これが唯一の方法でした。プロジェクト

を検索するマップと右の列200社のロゴ企業

と22件のプロジェクト

左列のプロジェクトの4種類

センターの列を持つ

サイドバー（それらすべて最初はグレースケールで）

そして、私がしたのは、プロジェクト、プロジェクト、企業の種類の一致するイメージを作ることでした任意の組み合わせでマウスオーバー時にマップが変わります。

しかし、私は多くの企業がいると、サイドバーがヘッダーにヒットした後、他の3つの要素をすべて固定する必要があります。

Psが：私はサイドバー

/* The sticky */ 
 
.sidebar { 
 
    position: -webkit-sticky; 
 
    position: sticky; 
 
    top: 5px; 
 
} 
 

 
.fixed{ 
 
    position:fixed; 
 
} 
 

 
.column-1 { 
 
float: left; 
 
width: 25%; 
 
} 
 

 
.column-2 { 
 
float: left; 
 
width: 25%; 
 
} 
 

 
.column-3{ 
 
float: left; 
 
width: 25%; 
 
} 
 

 
.column-4 { 
 
float: right; 
 
width: 25%; 
 
}

<script language="javascript" type="text/javascript"> 
 
var sidebar = document.getElementById('sidebar'); 
 
Stickyfill.add(sidebar); 
 

 
// Preload Images 
 
var image1 = new Image(); image1.src = "/type1_gray.png"; 
 
var image2 = new Image(); image2.src = "/type2_gray.png"; 
 
var image3 = new Image(); image3.src = "/type3_gray.png"; 
 
var image4 = new Image(); image4.src = "/type4_gray.png"; 
 

 
var image5 = new Image(); image5.src = "/project1_gray.png"; 
 
var image6 = new Image(); image6.src = "/project2_gray.png"; 
 
var image7 = new Image(); image7.src = "/project3_gray.png"; 
 
var image8 = new Image(); image8.src = "/project4_gray.png"; 
 
var image9 = new Image(); image9.src = "/project5_gray.png"; 
 
var image10 = new Image(); image10.src = "/project6_gray.png"; 
 
var image11 = new Image(); image11.src = "/project7_gray.png"; 
 
var image12 = new Image(); image12.src = "/project8_gray.png"; 
 
var image13 = new Image(); image13.src = "/project9_gray.png"; 
 
var image14 = new Image(); image14.src = "/project10_gray.png"; 
 
var image15 = new Image(); image15.src = "/project11_gray.png"; 
 
var image16 = new Image(); image16.src = "/project12_gray.png"; 
 
var image17 = new Image(); image17.src = "/project13_gray.png"; 
 
var image18 = new Image(); image18.src = "/project14_gray.png"; 
 
var image19 = new Image(); image19.src = "/project15_gray.png"; 
 
var image20 = new Image(); image20.src = "/project16_gray.png"; 
 
var image21 = new Image(); image21.src = "/project17_gray.png"; 
 
var image22 = new Image(); image22.src = "/project18_gray.png"; 
 
var image23 = new Image(); image23.src = "/project19_gray.png"; 
 
var image24 = new Image(); image24.src = "/project20_gray.png"; 
 
var image25 = new Image(); image25.src = "/project21_gray.png"; 
 
var image26 = new Image(); image26.src = "/project22_gray.png"; 
 

 
var image27 = new Image(); image27.src = "/map_clean.png"; 
 

 
var image28 = new Image(); image28.src = "/company1_gray.png"; 
 
var image29 = new Image(); image29.src = "/company2_gray.png"; 
 
var image30 = new Image(); image30.src = "/company3_gray.png"; 
 
var image31 = new Image(); image31.src = "/company4_gray.png"; 
 
var image32 = new Image(); image32.src = "/company5_gray.png"; 
 
var image33 = new Image(); image33.src = "/company6_gray.png"; 
 
var image34 = new Image(); image34.src = "/company7_gray.png"; 
 
var image35 = new Image(); image35.src = "/company8_gray.png"; 
 
var image36 = new Image(); image36.src = "/company9_gray.png"; 
 
var image37 = new Image(); image37.src = "/company10_gray.png"; 
 
var image38 = new Image(); image38.src = "/company11_gray.png"; 
 
var image39 = new Image(); image39.src = "/company12_gray.png"; 
 

 
var image40 = new Image(); image40.src = "/company13_gray.png"; 
 
var image41 = new Image(); image41.src = "/company14_gray.png"; 
 
\t (...) 
 
\t 
 
</script> 
 

 
<style type="text/css"> 
 
    p { line-height: 45px; } 
 
</style> 
 

 

 
<div id="sidebar" class="sidebar"> 
 
<img name="image4" src="/type4_gray.png" style="width:25%" onmouseover="image4.src='/type1.png'; image10.src='/project6.png'; image12.src='/project8.png'; image15.src='/project11.png'; image16.src='/project12.png'; image21.src='/project17.png'; image22.src='/project18.png'; image24.src='/project20.png'; image27.src='/map_projectstype1.png'; image28.src='/company1.png'; image30.src='/company2.png'; image32.src=' /company5.png'; image37.src='/company10.png'; image36.src='/company9.png'; image40.src='/company13.png'; " onmouseout="image4.src='/type4_gray.png'; image10.src='/project6_gray.png'; image12.src='/project8_gray.png'; image15.src='/project11_gray.png'; image16.src='/project12_gray.png'; image21.src='/project17_gray.png'; image22.src='/project18_gray.png'; image24.src='/project20_gray.png'; image27.src='/map_clean.png'; image28.src='/company1_gray.png'; image30.src='/company3_gray.png'; image32.src='/company5_gray.png'; image37.src='/company10_gray.png'; image36.src='/company9_gray.png'; image40.src='/company13_gray.png'; image179.src='/company13_gray.png';"/><img name="image3" src="/type3_gray.png" style="width:25%" onmouseover="image3.src='/type3.png'; image18.src='/project14.png'; image19.src='/project15.png'; image27.src='/map_projectstype3.png';" onmouseout="image3.src='/type3_gray.png'; image18.src='/project14_gray.png'; image19.src='/project15_gray.png'; image27.src='/map_clean.png';"/> 
 
(...) 
 

 
</div> 
 
<div class="column-1"> 
 
<h4>Agentes</h4> 
 
<h6>Federais</h6> 
 
<a href="#" title="Agência Nacional de Aviação Civil" onmouseover="image28.src='/company1.png'; image4.src='/type1.png'; image21.src='/project17.png'; image27.src='/map_projectscompany1.png';" onmouseout="image28.src='/company1_gray.png'; image4.src='/type4_gray.png'; image21.src='/project17_gray.png'; image27.src='/map_clean.png';"><img name="image28" src="/company1_gray.png" alt="" width="85"/></a> &nbsp; <a href="#" title="Banco de Desenvolvimento de Minas Gerais" onmouseover="image29.src='http://localhost/gpu/wp-content/uploads/2017/04/bdmg.png'; image1.src='/type1.png'; image20.src='/project16.png'; image27.src='/map_projectscompany1.png';" onmouseout="image29.src='/company2_gray.png'; image1.src='/type1_gray.png'; image20.src='/project16_gray.png'; image27.src='/map_clean.png';"><img name="image29" src="/company2_gray.png" alt="" width="80" /></a> &nbsp; <a href="#" title="Banco Nacional de Desenvolvimento Econômico e Social " onmouseover="image30.src='/company2.png'; image4.src='/type1.png'; image24.src='/project20.png'; image27.src='/map_project20.png';" onmouseout="image30.src='/company3_gray.png'; image4.src='/type4_gray.png'; image24.src='/project20_gray.png'; image27.src='/map_clean.png';"><img name="image30" src="/company3_gray.png" alt="" width="90" /></a> 
 
(...) 
 
<h6>Estaduais</h6> 
 
(...) 
 
<h6>Municipais</h6> 
 
(...) 
 
<h6>Empreendedores</h6> 
 
(...) 
 
<h6>Construtoras</h6> 
 
(...) 
 
<h6>Consultores</h6> 
 
(...) 
 
<h6>Projetistas</h6> 
 
(...) 
 
<h6>Proprietários do Terreno</h6> 
 
(...) 
 
<h6>Parceiros</h6> 
 
(...) 
 
</div> 
 

 

 
<div class="column-2"> 
 
<h4>Projetos</h4> 
 
<div class="fixed"> 
 
<a onmouseover="image5.src='/project1.png'; image1.src='/type1.png'; image27.src='/map_project1.png';" onmouseout="image5.src='/project1_gray.png'; image1.src='/type1_gray.png'; image27.src='/map_clean.png';"><img name="image5" src="/project1_gray.png" alt="" width="300" /></a> 
 
<a onmouseover="image6.src='/project2.png'; image2.src='/type2.png'; image27.src='/map_project2.png'; image40.src=' /company13.png';" onmouseout="image6.src='/project2_gray.png'; image2.src='/type2_gray.png'; image27.src='/map_clean.png'; image40.src='/company13_gray.png';"><img name="image6" src="/project2_gray.png" alt="" width="300" /></a> 
 

 
(...) 
 

 
<a href="#" onmouseover="image15.src='/project11.png'; image4.src='/type1.png'; image27.src='/map_project1.png'; image32.src=' /company5.png'; image40.src=' /company13.png';" onmouseout="image15.src='/project11_gray.png'; image4.src='/type4_gray.png'; image27.src='/map_clean.png'; image32.src='/company5_gray.png'; image40.src='/company13_gray.png';"><img name="image15" src="/project11_gray.png" alt="" width="300" /></a> 
 
</div> 
 
</div> 
 

 
<div class="column-3"> 
 
&nbsp; 
 
<div class="fixed"> 
 
<a href="#" onmouseover="image16.src='/project12.png'; image4.src='/type1.png'; image27.src='/map_project12.png';" onmouseout="image16.src='/project12_gray.png'; image4.src='/type4_gray.png'; image27.src='/map_clean.png';"><img name="image16" src="/project12_gray.png" alt="" width="300" /></a> 
 

 
(...) 
 
<a href="#" onmouseover="image24.src='/project20.png'; image4.src='/type1.png'; image27.src='/map_project20.png'; image30.src='/company2.png';" onmouseout="image24.src='/project20_gray.png'; image4.src='/type4_gray.png'; image27.src='/map_clean.png'; image30.src='/company3_gray.png';"><img name="image24" src="/project20_gray.png" alt="" width="300" /></a> 
 
<a href="#" onmouseover="image25.src='/project21.png'; image2.src='/type2.png'; image27.src='/map_project21.png';" onmouseout="image25.src='/project21_gray.png'; image2.src='/type2_gray.png'; image27.src='/map_clean.png';"><img name="image25" src="/project21_gray.png" alt="" width="300" /></a> 
 
<a href="#" onmouseover="image26.src='/project22.png'; image1.src='/type1.png'; image27.src='/map_project22.png';" onmouseout="image26.src='/project22_gray.png'; image1.src='/type1_gray.png';"><img name="image26" src="/project22_gray.png" alt="" width="300" /></a> 
 
</div> 
 
</div> 
 

 
<div class="column-4"> 
 
<h4>Mapa</h4> 
 
<img name="image27" src="/map_clean.png" alt="" width="300" class="fixed"/></a> 
 

 
</div>

出典

2017-05-11 Carol Almeida

上記のメニューを持っているあなたは、CSSにかなり精通見えるので、あなたは、私が示唆されてるかを理解できるかどうか教えてください。

divをサイドバーの下に100pxにしてposition: absolute; bottom: -100pxとし、divをサイドバーの子にします。これはうまくいくはずです。

出典

2017-05-11 21:39:47

スティッキーサイドバーと固定コラム

答えて

関連する問題