Javascript Sticky侧边栏的行为异常

演示：

我用jQuery/Bootstrap编写的带有粘性边栏的页面正按照我所希望的方式工作。然而，当我滚动时，边栏并不平滑，并且行为不稳定。当用户滚动时，它会抖动

另外，该功能正是我想要的，当侧边栏的内容到达“底部”时停止

HTML:

jQuery（文档）.ready（函数（）{
jQuery.fn.stickyTopBottom=函数（）{
变量选项={
容器：jQuery（“#stickymain”），
顶部偏移量：0，
底部偏移量：0
};
console.log（选项）；
让jqueryl=jQuery（this）
让container\u top=options.container.offset（）.top
让元素_top=jqueryl.offset（）.top
让viewport_height=jQuery（window）.height（）
jQuery（窗口）.on（'resize'，function（））{
viewport\u height=jQuery（窗口）.height（）
});
让当前_平移=0
让最后一个_viewport_top=document.documentElement.scrollTop | | document.body.scrollTop
jQuery（窗口）.滚动（函数（）{
var viewport_top=document.documentElement.scrollTop | | document.body.scrollTop
让视口\底部=视口\顶部+视口\高度
让有效视窗视窗视窗顶=视窗视窗视窗顶+选项。视窗顶偏移
让有效视口底部=视口底部-选项.bottom\u偏移
让元素_height=jqueryl.height（）
让我们向上滚动=视口顶部<最后一个视口顶部
让元素在视口中匹配=元素高度<视口高度
让new_translation=null
如果（正在向上滚动）{
if（有效视口顶部<容器顶部）
新的_翻译=0
else if（有效视口顶部<元素顶部+当前平移）
新的\u转换=有效的\u视口\u顶部-元素\u顶部
}else if（元素在视口中匹配）{
如果（有效视口顶部>元素顶部+当前平移）
新的\u转换=有效的\u视口\u顶部-元素\u顶部
}否则{
让container\u bottom=container\u top+options.container.height（）
如果（有效视口底部>容器底部）
新的元素转换=容器底部-（元素顶部+元素高度）
else if（有效视口底部>元素顶部+元素高度+当前平移）
新的\u转换=有效的\u视口\u底部-（元素\u顶部+元素\u高度）
}
if（新的_翻译！=null）{
当前翻译=新翻译；
log（'我在css'这里'）；
css（'transform'，（'translate（0'，+current_translate+'px'）；
}
最后一个视口\顶部=视口\顶部
});
}
jQuery（“#stickyside”）.stickyTopBottom（）；
});
#标题{
高度：100px；
背景：红色；
边缘底部：15px；
}
瑞德先生{
颜色：红色；
}
.col-xs-8{
背景：浅灰色；
}
梅因先生{
最小高度：1200px；
}
#粘面{
位置：绝对位置；
}
#页脚{
边缘顶部：15px；
高度：100px；
背景：橙色；
}

这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是
主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。
这是主要内容

这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是
主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。这是主要内容。
这是主要内容

查看滚动时此侧边栏如何闪烁？我想解决这个问题
这是它停止滚动的终点。这是它停止滚动的终点。这是它停止滚动的终点。这是它停止滚动的终点。这是它停止滚动的终点。这是它停止滚动的结尾。这是
是它停止滚动的终点。这是它停止滚动的终点。这是它停止滚动的终点。这是它停止滚动的终点。这是它停止滚动的终点。这是它停止滚动的终点。
这是它停止滚动的终点。这是它停止滚动的终点

据我所知，这是因为侧边栏的内容必须在每次内容“滚动”时重新绘制。把它想象成视频游戏的低帧速率

您可以通过允许它正常滚动来修复此问题，并在您用来阻止它滚动的事件发生时，使用javascript函数

将属性样式从绝对更改为固定。
值得注意的是，它在Chrome中看起来很好，但在Firefox中却不稳定。请尝试将其缓慢或多次滚动。有时它会平滑地滚动。它在我的Chrome（Mac）中不稳定。在Firefox和Safari中也是如此：（当滚动距离达到最低点时，您是否反对将
#stickyside
元素设置为固定位置？这似乎是比使用每个滚动事件修改位置更好的方法。如何检测和固定位置？
document.getElementById(/*Element id*/).style