粘边条和固定柱

Question

I fixed a sidebar (using position: sticky) when its hits the header, but I also want that a div sticky 100 px below this sidebar and when I use position:fixed it fixes the div relative to the browser window. Instead, it should be fixed relative to the sidebar.

The code is very confuse, it was the only way that I found out to make all the combinations that I need.

1. Sidebar with 4 types of projects
2. Center column with 22 projects
3. Left column with 200 logo companies
4. Right column with a map to locate the project

(them all initially in grayscale)

And what I did was to make the matching images of type of project, projects, companies envolved and a map turn colored on mouseover in any combination.

But, once I have many companies I need all the other 3 elements fixed after the sidebar hits the header.

Ps.: I have a menu above the sidebar

 /* 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"; (...) </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> 

Answer 1

You look pretty savvy in CSS, so tell me if you can understand what I'm suggesting.

Make the div you want 100px under the sidebar position: absolute; bottom: -100px position: absolute; bottom: -100px and make the div a child of the sidebar. This should work.