Question

当我点击标题时，我修复了一个侧边栏（使用position：sticky），但我也希望在这个侧边栏下面有一个div粘贴100 px，当我使用position：fixed时，它修复了相对于浏览器窗口的div。相反，它应该相对于侧边栏固定。

代码非常混乱，这是我发现制作所需组合的唯一方法。

有4种类型项目的补充工具栏
包含22个项目的中心列
左栏有200家徽标公司
带有用于查找项目的地图的右栏

（它们最初都是灰度）

我所做的是制作项目，项目，公司类型的匹配图像，并在任何组合中鼠标移动时地图变为彩色。

但是，一旦我有很多公司，我需要在侧边栏击中标题后修复所有其他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";
	(...)
	
</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

你在CSS中看起来非常精明，所以请告诉我你是否能理解我的建议。

在侧边栏position: absolute; bottom: -100px下创建想要100px的div并使div成为侧边栏的子项。这应该有用。

粘贴边栏和固定栏

1 个答案: