Javascript 粘性边栏和固定柱

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

代码非常混乱，这是我找到的唯一一种方法，使我需要的所有组合

包含4种项目类型的侧栏

有22个项目的中柱

左栏有200家公司的标志

右栏，带有用于定位项目的地图

（它们最初都是灰度的）

我所做的是使项目类型、项目、所解决的公司和地图的匹配图像在鼠标上方以任意组合着色

但是，一旦我有很多公司，我需要在边栏点击标题后修复所有其他3个元素

附：我在侧边栏上方有一个菜单

/*粘性*/
.侧边栏{
职位：-网络工具包粘性；
位置：粘性；
顶部：5px；
}
.固定{
位置：固定；
}
.第1列{
浮动：左；
宽度：25%；
}
.第2列{
浮动：左；
宽度：25%；
}
.第3栏{
浮动：左；
宽度：25%；
}
.第4栏{
浮动：对；
宽度：25%；
}

var sidebar=document.getElementById（'sidebar'）；
添加（侧栏）；
//预加载图像
var image1=新图像（）；image1.src=“/type1_gray.png”；
var image2=新图像（）；image2.src=“/type2_gray.png”；
var image3=新图像（）；image3.src=“/type3_gray.png”；
var image4=新图像（）；image4.src=“/type4_gray.png”；
var image5=新图像（）；image5.src=“/project1_gray.png”；
var image6=新图像（）；image6.src=“/project2_gray.png”；
var image7=新图像（）；image7.src=“/project3_gray.png”；
var image8=新图像（）；image8.src=“/project4_gray.png”；
var image9=新图像（）；image9.src=“/project5_gray.png”；
var image10=新图像（）；image10.src=“/project6_gray.png”；
var image11=新图像（）；image11.src=“/project7_gray.png”；
var image12=新图像（）；image12.src=“/project8_gray.png”；
var image13=新图像（）；image13.src=“/project9_gray.png”；
var image14=新图像（）；image14.src=“/project10_gray.png”；
var image15=新图像（）；image15.src=“/project11_gray.png”；
var image16=新图像（）；image16.src=“/project12_gray.png”；
var image17=新图像（）；image17.src=“/project13_gray.png”；
var image18=新图像（）；image18.src=“/project14_gray.png”；
var image19=新图像（）；image19.src=“/project15_gray.png”；
var image20=新图像（）；image20.src=“/project16_gray.png”；
var image21=新图像（）；image21.src=“/project17_gray.png”；
var image22=新图像（）；image22.src=“/project18_gray.png”；
var image23=新图像（）；image23.src=“/project19_gray.png”；
var image24=新图像（）；image24.src=“/project20_gray.png”；
var image25=新图像（）；image25.src=“/project21_gray.png”；
var image26=新图像（）；image26.src=“/project22_gray.png”；
var image27=新图像（）；image27.src=“/map\u clean.png”；
var image28=新图像（）；image28.src=“/company1_gray.png”；
var image29=新图像（）；image29.src=“/company2_gray.png”；
var image30=新图像（）；image30.src=“/company3_gray.png”；
var image31=新图像（）；image31.src=“/company4_gray.png”；
var image32=新图像（）；image32.src=“/company5_gray.png”；
var image33=新图像（）；image33.src=“/company6_gray.png”；
var image34=新图像（）；image34.src=“/company7_gray.png”；
var image35=新图像（）；image35.src=“/company8_gray.png”；
var image36=新图像（）；image36.src=“/company9_gray.png”；
var image37=新图像（）；image37.src=“/company10_gray.png”；
var image38=新图像（）；image38.src=“/company11_gray.png”；
var image39=新图像（）；image39.src=“/company12_gray.png”；
var image40=新图像（）；image40.src=“/company13_gray.png”；
var image41=新图像（）；image41.src=“/company14_gray.png”；
(...)
p{线高度：45px；}
(...)
代理
联邦制
(...)
埃斯塔杜伊斯
(...)
市政厅
(...)
矿藏
(...)
构造
(...)
顾问
(...)
项目
(...)
土地所有权
(...)
帕切罗斯
(...)
项目
(...)
马帕

你看起来很精通CSS，所以告诉我你是否能理解我的建议

在侧边栏

position:absolute下设置所需的div为100px；底部：-100px

并使div成为侧边栏的子级。这应该行得通