Jquery 位置固定元素停止滚动超过页脚，停止时抖动

我试图阻止我的右边元素有固定的位置，从页脚以外滚动我成功了，但现在我面临新的问题，虽然元素停止在页脚，但它在停止/滚动时跳跃。 我尝试应用css转换，但仍然没有成功，下面是我的部分代码

<div class="rightside_content">
<a id="" href="">
    <img src="https://dabuttonfactory.com/button.png?t=Your+text+here&f=Calibri-Bold&ts=24&tc=fff&tshs=1&tshc=000&hp=20&vp=8&c=5&bgt=gradient&bgc=3d85c6&ebgc=073763">
</a>
<a id="" href="">
    <img src="https://dabuttonfactory.com/button.png?t=Your+text+here&f=Calibri-Bold&ts=24&tc=fff&tshs=1&tshc=000&hp=20&vp=8&c=5&bgt=gradient&bgc=3d85c6&ebgc=073763">
</a>

@仅介质屏幕和（最小宽度：768px）{
.右侧内容{
位置：固定；
右：5%；
宽度：22%；
边际上限：0；
/*-webkit过渡：所有0.15秒轻松*/
/*-moz转换：位置15s*/
/*-ms转换：位置15s*/
/*-o型过渡：位置15s*/
/*过渡：所有0.15秒缓解*/
/*动画：向前滚动1s*/
}
}
$（窗口）。滚动（（）=>{
var footertop=$（'.main_footer'）.offset（）.top；
var scrollTop=$（文档）.scrollTop（）+$（窗口）.height（）；
变量差异=滚动顶部-页脚顶部；
var bottomValue=scrollTop>footerToTop？差异：“继承”；
$（'.rightside_content'）.css（“bottom”，bottomValue）；
});

---

这个问题只能从jquery中处理吗？

您可以添加一个可复制的代码段吗？这将有助于阅读这篇关于动画性能的文章，它可能会停止口吃：你能添加一个可复制的代码片段吗？这将有助于阅读这篇关于动画性能的文章，它可能会停止口吃：

<footer class="main_footer">
</footer>

<style>
@media only screen and (min-width: 768px) {
    .rightside_content {
        position: fixed;
        right: 5%;
        width: 22%;
        margin-top: 0;
         /* -webkit-transition: all 0.15s ease; */
        /* -moz-transition: position 15s; */
        /* -ms-transition: position 15s; */
        /* -o-transition: position 15s; */
        /* transition: all 0.15s ease; */
        /* animation: smoothScroll 1s forwards; */
    }
}
</style>

<script>
$(window).scroll(() => {
    var footerToTop = $('.main_footer').offset().top;
    var scrollTop = $(document).scrollTop() + $(window).height();
    var difference = scrollTop - footerToTop;
    var bottomValue = scrollTop > footerToTop ? difference : "inherit";
    $('.rightside_content').css("bottom",bottomValue);
});
</script>