如何平滑地防止固定元素滚动过去指定元素答案

【问题标题】：How to Smoothly Prevent a Fixed Element from Scrolling Past A Specified Element如何平滑地防止固定元素滚动过去指定元素
【发布时间】：2013-06-28 03:02:12
【问题描述】：

基本上我想做的就是始终将我的博客文章的元信息保留在屏幕上。事实上，元信息（标题、作者等）显示在帖子内容的左侧，我将它设置为当我向下滚动时元信息平滑地停留在屏幕上的位置。但是，我遇到了一个问题：

我无法顺利不滚动#cmets 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();
}

该代码通过外部 JS 文件包含并在页面底部调用。您可以在此处查看所有这些操作：http://www.rickbeckman.org/dumber-and-dumber-and-dumber/

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery css scroll positioning

【解决方案1】：

当元块达到 maxTop 时，您可以通过给 cmets div 提供 300 像素的填充来使 cmets div 向右缩小。

【讨论】：

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

【解决方案2】：

我刚刚测试了您的代码，并且能够通过将 26 更改为更大的数字（例如 60 左右）来修复重叠问题。

var elementHeight = 26 + element.height();

希望这会有所帮助。

【讨论】：