Question

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

我无法顺利地不滚动#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/

非常感谢任何帮助。

Answer 1

当meta块达到maxTop时，你可以通过给它一个300px填充来使注释div缩小到右边。

Answer 2

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

var elementHeight = 26 + element.height（）;

希望这有帮助。

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

2 个答案: