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

How to Smoothly Prevent a Fixed Element from Scrolling Past A Specified Element

本文关键字：元素 滚动 经过 何平滑 平滑      更新时间：2023-09-26

本质上，我想做的是始终将博客文章的元信息显示在屏幕上。事实上，元信息（标题、作者等）显示在帖子内容的左侧，我已经设置好了，当我向下滚动时，元信息会平滑地显示在屏幕上。然而，我遇到了一个问题：

我无法让它平滑地滚动#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();
}

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

如有任何帮助，我们将不胜感激。

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

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

var elementHeight=26+element.height（）；

希望这能有所帮助。

相关文章：