滚动时将fixed元素定位至非fixed元素的适配问题

我有一个设置了position: fixed的按钮（#phone-bar），需求是：当footer未完全可见时，按钮的bottom: 0；当footer可见时，按钮保持在footer上方的对应位置。目前按钮放在footer内部，位置可以调整。

当前实现存在问题：footer未完全可见时按钮下方会出现可见间隙。

现有代码 #

jQuery 代码 #

jQuery(window).on("scroll load", function (e) {
    let footerH = jQuery('#footer').prop('scrollHeight');
    let windowTop = jQuery(window).scrollTop() + window.innerHeight;
    let footerTop = jQuery('#footer').offset().top;

    //footer可见
    if (windowTop >= footerTop) {
        jQuery("#phone-bar").removeClass("pbNoFooter");
    //footer不可见
    } else {
        jQuery("#phone-bar").addClass("pbNoFooter");
    }
});

HTML 结构 #

<footer id="footer" role="contentinfo">
    <div id="footer-content">
        <div class="container">
            xxxxxx xxxxxx xxxxxx xxxxxx
            <br>
            xxxxxx xxxxxx
        </div>
    </div>
    <div id="phone-bar" class="open">
        <a class="phone-bar-label" href="#">
            <span class="glyphicon glyphicon-earphone phone-icon"></span>
            %s
            <span class="glyphicon glyphicon-chevron-up"></span>
            <span class="glyphicon glyphicon-chevron-down"></span>
        </a>
    </div>
</footer>

CSS 样式 #

#phone-bar {
    background: transparent;
    padding: 0 15px;
    position: fixed;
    width: 100%;
    top: auto;
    bottom: 96px;
    z-index: 1;
    overflow-y: auto;
}

#phone-bar.pbNoFooter {
    bottom: 0;
}

@media screen and (min-width: 862px) {
    #phone-bar {
        bottom: 77px;
    }
}

补充说明 #

• EDIT1：不需要纯CSS解决方案，希望了解动态计算bottom值的方法。
• EDIT2：完整HTML结构及全局CSS：

<body>
    <header/>
    <nav/>
    <div class="container main-content-block"/>
    <footer>
        <div id="phone-bar"/>   <!--可移至footer外-->
    </footer>
</body>

body {
    position: relative;
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.main-content-block {
    flex: 1;
    width: 100%;
}

解决方案：动态计算bottom值 #

当前逻辑仅判断footer是否进入视口，未考虑footer露出的高度，导致按钮bottom值切换时机错位。我们需要计算footer在视口中的可见高度，动态调整按钮的bottom值：

修改后的jQuery代码 #

jQuery(window).on("scroll load resize", function (e) {
    const $footer = jQuery('#footer');
    const $phoneBar = jQuery('#phone-bar');
    const footerTop = $footer.offset().top;
    const footerHeight = $footer.outerHeight(); // 包含padding/border，计算更准确
    const viewportHeight = window.innerHeight;
    const scrollTop = jQuery(window).scrollTop();
    
    // 计算footer在视口中的可见高度
    const visibleFooterHeight = Math.max(0, scrollTop + viewportHeight - footerTop);
    // 匹配媒体查询的默认bottom值
    const defaultBottom = window.innerWidth >= 862 ? 77 : 96;
    let targetBottom = 0;
    
    if (visibleFooterHeight >= footerHeight) {
        // footer完全可见，使用默认bottom值
        targetBottom = defaultBottom;
        $phoneBar.removeClass("pbNoFooter");
    } else if (visibleFooterHeight > 0) {
        // footer部分可见，bottom值为footer未显示的高度，让按钮贴紧footer顶部
        targetBottom = footerHeight - visibleFooterHeight;
        $phoneBar.removeClass("pbNoFooter");
    } else {
        // footer完全不可见，bottom设为0
        targetBottom = 0;
        $phoneBar.addClass("pbNoFooter");
    }
    
    // 直接设置bottom值，替代类切换逻辑
    $phoneBar.css('bottom', `${targetBottom}px`);
});

可选CSS优化 #

移除.pbNoFooter类的样式，因为JS已直接控制bottom值：

#phone-bar {
    background: transparent;
    padding: 0 15px;
    position: fixed;
    width: 100%;
    top: auto;
    bottom: 96px; /* 默认值，会被JS覆盖 */
    z-index: 1;
    overflow-y: auto;
}

@media screen and (min-width: 862px) {
    #phone-bar {
        bottom: 77px; /* 默认值，会被JS覆盖 */
    }
}

逻辑说明 #

1. 监听scroll/load/resize事件，确保窗口大小变化时也能正确计算
2. 计算footer可见高度：scrollTop + viewportHeight - footerTop，负值代表footer未进入视口
3. 根据footer可见状态动态设置bottom值：
   • 完全不可见：bottom: 0
   • 部分可见：bottom = footer总高度 - 可见高度，按钮始终贴住footer顶部
   • 完全可见：使用媒体查询对应的默认bottom值（77px/96px）

内容的提问来源于stack exchange，提问作者lucalf