Javascript 粘性列垂直滚动

我正在制作一个网格，以一种特定的方式处理内容，我需要制作一列，当到顶部的距离为0时，沿着左列的长文本垂直滚动

在我的

CSS

上，我尝试了

位置：sticky，但不工作

我还尝试使用
var sidebar=document.getElementById（'sidebar'）放置一个
jQuery
解决方案；
添加（侧栏）但什么都没有

我错过了什么

多谢各位


.grid1{
内容：''；
显示：块；
明确：两者皆有；
宽度：100%；
}
.二年级{
显示：内联；
}
.grid3{
显示：网格；
网格模板列：43%57%；
}
.第1-1列{
浮动：左；
宽度：45%；
背景：红色；
}
.第1-2列{
浮动：对；
宽度：53%；
背景：红色；
}
.第2-1列{
浮动：左；
宽度：18%；
背景：蓝色；
}
.第2-2列{
浮动：左；
宽度：67%；
背景：蓝色；
左边距：15px；
}
.第2-3列{
浮动：对；
宽度：11%；
背景：蓝色；
}
.第3-1列{
网格柱：1；
网格行：1；
背景：绿色；
}
.第3-2列{
网格柱：2；
网格行：1；
背景：绿色；
}
.第3-3列{
网格列开始：1；
网格柱端：3；
背景：绿色；
边缘顶部：15px；
网格行：2；
}
.info{
位置：粘性；
职位：-网络工具包粘性；
排名：0；
}

标题1

标题2

文本

infos

文本
（长文本）
文本
刚刚用
jQuery
代码找到了解决方案：



$（函数（）{
变量头=$（“.info”）；
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>=90）{
header.removeClass（'info'）.addClass（“info2”）；
}否则{
header.removeClass（“info2”）.addClass（“info”）；
}
});
});
.grid1{
内容：''；
显示：块；
明确：两者皆有；
宽度：100%；
}
.二年级{
显示：内联；
}
.grid3{
显示：网格；
网格模板列：43%57%；
}
.第1-1列{
浮动：左；
宽度：45%；
背景：红色；
}
.第1-2列{
浮动：对；
宽度：53%；
背景：红色；
}
.第2-1列{
浮动：左；
宽度：18%；
背景：蓝色；
}
.第2-2列{
浮动：左；
宽度：67%；
背景：蓝色；
左边距：15px；
}
.第2-3列{
浮动：对；
宽度：11%；
背景：蓝色；
}
.第3-1列{
网格柱：1；
网格行：1；
背景：绿色；
}
.第3-2列{
网格柱：2；
网格行：1；
背景：绿色；
}
.第3-3列{
网格列开始：1；
网格柱端：3；
背景：绿色；
边缘顶部：15px；
网格行：2；
}
.info2{
位置：固定；
排名：0；
背景：蓝色；
宽度：11%；
}

标题1

标题2

文本

infos

文本
Lorem ipsum dolor sit amet，是一位杰出的献身者。奥古斯、拉西尼亚和维韦拉、波苏尔和尼塞尔。克拉斯·埃拉特·阿库。这是一辆汽车，在维韦拉拍卖行。只需坐在阿梅特·埃尼姆·布兰迪的权杖上。埃尼安·乌拉姆·科珀的生活不体面。在安特门，nec posuere leo lobortis nec。这是一个枕上节拍。巨大的悬念，在三分之一的时间里，这是一句至理名言。只需坐在阿梅特·埃尼姆·布兰迪的权杖上。埃尼安·乌拉姆·科珀的生活不体面。在安特门，nec posuere leo lobortis nec。这是一个枕上节拍。巨大的悬念，在三分之一的时间里，这是一句至理名言。
Lorem ipsum dolor sit amet，是一位杰出的献身者。奥古斯、拉西尼亚和维韦拉、波苏尔和尼塞尔。克拉斯·埃拉特·阿库。这是一辆汽车，在维韦拉拍卖行。只需坐在阿梅特·埃尼姆·布兰迪的权杖上。埃尼安·乌拉姆·科珀的生活不体面。在安特门，nec posuere leo lobortis nec。这是一个枕上节拍。巨大的悬念，在三分之一的时间里，这是一句至理名言。只需坐在阿梅特·埃尼姆·布兰迪的权杖上。埃尼安·乌拉姆·科珀的生活不体面。在安特门，nec posuere leo lobortis nec。这是一个枕上节拍。大酒杯的悬念，在三体a上的小酒杯，在金塔上的名言
文本
刚刚用
jQuery
代码找到了解决方案：



$（函数（）{
变量头=$（“.info”）；
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>=90）{
header.removeClass（'info'）.addClass（“info2”）；
}否则{
header.removeClass（“info2”）.addClass（“info”）；
}
});
});
.grid1{
内容：''；
显示：块；
明确：两者皆有；
宽度：100%；
}
.二年级{
显示：内联；
}
.grid3{
显示：网格；
网格模板列：43%57%；
}
.第1-1列{
浮动：左；
宽度：45%；
背景：红色；
}
.第1-2列{
浮动：对；
宽度：53%；
背景：红色；
}
.第2-1列{
浮动：左；
宽度：18%；
背景：蓝色；
}
.第2-2列{
浮动：左；
宽度：67%；
背景：蓝色；
左边距：15px；
}
.第2-3列{
浮动：对；
宽度：11%；
背景：蓝色；
}
.第3-1列{
网格柱：1；
网格行：1；
背景：绿色；
}
.第3-2列{
网格柱：2；
网格行：1；
背景：绿色；
}
.第3-3列{
网格列开始：1；
网格柱端：3；
背景：绿色；
边缘顶部：15px；
网格行：2；
}
.info2{
位置：固定；
排名：0；
背景：蓝色；
宽度：11%；
}

标题1

标题2

文本

infos

文本
Lorem ipsum dolor sit amet，是一位杰出的献身者。奥古斯、拉西尼亚和维韦拉、波苏尔和尼塞尔。克拉斯·埃拉特·阿库。这是一辆小型汽车