Javascript 类似div的固定位置：绝对位置

我需要这样的东西，但是位置是绝对的，而不是固定的

使用JavaScript是否可以在用户滚动页面时更改顶部

var elementPosition=$（'#div2'）.offset（）；
var div1=$（“#div1”）；
var main=$（“#main”）；
变量间隔=$（“#间隔”）；
$（窗口）。滚动（函数（）{
if（$（window.scrollTop（）>elementPosition.top）{
var left=Math.ceil（div1.offset（）.left+div1.outerWidth（））+'px'；
console.log（main.width（），div1.width（））
var width=main.width（）-div1.outerWidth（）+'px'；
$（'#div2'）.css({
位置：'固定'，
左:左,，
宽度：宽度
});
}否则{
$（'#div2'）.css({
“位置”：“静态”，
宽度：“自动”
});
}
});
正文{
保证金：0；
宽度：100%；
}
*{框大小：边框框；}
#主要{
宽度：80%；
保证金：0自动；
}
#第一组{
宽度：10%；
边框：实心1px#000000；
背景色：#0066CC；
浮动：左；
}
#第二组{
高度：30px；
边框：实心1px#000000；
背景色：#66CC00；
}
#间隔棒{
宽度：90%；
最小高度：30px；
浮动：左；
}

Lorem ipsum dolor sit amet enim。艾蒂安·乌兰科珀。暂停一次非猫咪的酒后驾车。猫科动物精英，猫科动物精英。库拉比图和利古拉。Ut molestie a，ultricies porta urna。蜗壳式公共前庭a、convallis ac、laoreet enim。多洛，多洛。佩伦特式便利。纳拉·艾米特·麦格纳。大前庭、大前庭、大前庭、大前庭、大前庭、大前庭。等分法。整数等号purus。前庭id为tortor fringilla，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为，前庭id为。整只乌龟，无同卵，无同卵。惩罚和惩罚的自然社会。ultricies a、孕妇vitae、dapibus risus ante sodales lectus blandit eu、Temporal diam Ped cursus vitae、ultricies eu、faucibus quis、porttitor eros cursus lectus、pellentesque eget、bibendum a、孕妇ullamcorper quam。纳勒姆·维韦拉·康塞特图尔。奎斯克·库苏斯和波特提托·里苏斯。等分扫描电镜。在康格省的hendrerit nulla quam nunc。尼布·维勒·里苏斯（nibh-vel risus）中的同侧隐翅虫（Lorem ipsum primis）。塞德·韦尔莱克托斯。矢状位，同侧腰或臀。
第二组
更改为：

代替（先前的）：

尝试跟踪鼠标滚动。查看此更新的小提琴：我强烈建议不要这样做。实时跟踪滚动是一项非常耗费资源的操作。即使做得正确。有很多事情你可以使用这种处理能力。最好是找到一种固定位置的方法来完成它。但如果你还是这样做，至少要使用转换，而不是top。并过滤滚动事件，不要让它在每次启动时触发你的功能。而且，这种方法可能会成为移动设备上的一大难题。特别是在IOS 8上，如果你的计划是以更复杂的方式使用这种方法，那么就这样做吧。
$('#div2').css({
  position: 'absolute',
  top: $(window).scrollTop(),
  left: left,
  width: width
});

$('#div2').css({
  position: 'fixed',
  left: left,
  width: width
});