Javascript 如何平滑地防止固定元素滚动超过指定元素

基本上，我想做的是让我的博客文章的元信息始终显示在屏幕上。实际上，元信息（标题、作者等）显示在文章内容的左侧，我将其设置为向下滚动时，元信息平稳地停留在屏幕上。但是，我有一个问题：

我无法让它平滑地滚动到#comments DIV。它要么重叠，要么跳跃，这取决于我如何调整代码

下面是我正在使用的JS函数：

function brazenlyScroll() {
    var element = jQuery(".single-post .headline_area");
    var top = element.offset().top - 50;
    var elementHeight = 26 + element.height();
    var maxTop = jQuery("#comments").offset().top - elementHeight;
    var scrollHandler = function() {
        if (jQuery(document).width() > 1035) {
            var scrollTop = jQuery(window).scrollTop();
            if (scrollTop<top) {
                element.css({position:"relative",top:""})
            } else if (scrollTop>maxTop) {
                element.css({position:"absolute",top:(maxTop+"px")})
            } else {
                element.css({position:"fixed",top:"50px"})
            }
        }
    }
    jQuery(window).scroll(scrollHandler);
    jQuery(window).resize(scrollHandler);
    scrollHandler();
}

函数brazenlyScroll（）{
var元素=jQuery（“.single post.headline_区域”）；
var top=element.offset（）.top-50；
var elementHeight=26+element.height（）；
var maxTop=jQuery（“#comments”）.offset（）.top-elementHeight；
var scrollHandler=函数（）{
if（jQuery（document）.width（）>1035）{
var scrollTop=jQuery（window.scrollTop（）；
如果（scrollTopmaxTop）{
css（{position:“absolute”，top:（maxTop+“px”）}）
}否则{
css（{位置：“固定”，顶部：“50px”}）
}
}
}
jQuery（窗口）.scroll（scrollHandler）；
jQuery（窗口）.resize（scrollHandler）；
scrollHandler（）；
}

该代码通过外部JS文件包含，并在页面底部调用。您可以在此处看到所有这些操作：

---

任何帮助都将不胜感激。

当meta块到达maxTop时，您可以通过给它一个300px的填充，使注释div向右收缩。

我刚刚测试了ur代码，并且能够通过将26改为更大的数字（比如60）来修复重叠

var elementHeight=26+element.height（）

---

希望这有帮助。

我不想缩小评论块。当元块到达其容器DIV的底部时，它应该完全停止滚动。当窗口缩小到足以引起滚动时，滚动问题会影响水平滚动。帖子内容移动到元信息后面。我想，我需要元块有一个确定的绝对或相对宽度，以及一个固定的垂直间距。我不知道该怎么做。