如何用jquery.sticky.js在footer前停止Div的粘性效果？

嘿，这个需求很实用，我来给你一步步搞定它！核心思路是利用jquery.sticky.js的bottomSpacing参数，通过计算footer的位置，让粘性Div滚动到footer上方时自动停止固定效果。

具体实现代码 #

首先，我们需要动态计算粘性Div需要保持的底部间距，确保它刚好停在footer的顶部：

jQuery(document).ready(function(){
    // 获取footer元素和粘性Div
    const $footer = jQuery("#stop-sticky");
    const $sticker = jQuery("#sticker");
    
    // 计算底部间距：页面总高度 - footer的顶部偏移 - 粘性Div的总高度（含padding、border、margin）
    function calculateBottomSpacing() {
        const stickyTotalHeight = $sticker.outerHeight(true); // 传true包含margin，计算更精准
        const footerTopOffset = $footer.offset().top;
        const pageHeight = jQuery(document).height();
        return pageHeight - footerTopOffset - stickyTotalHeight;
    }

    // 初始化粘性效果，传入计算好的bottomSpacing
    $sticker.sticky({
        topSpacing: 0,
        bottomSpacing: calculateBottomSpacing()
    });

    // 监听窗口大小变化，实时更新底部间距（适配响应式场景）
    jQuery(window).on("resize", function(){
        // 获取sticky插件实例，更新bottomSpacing参数
        $sticker.data("sticky").options.bottomSpacing = calculateBottomSpacing();
    });
});

原理说明 #

• bottomSpacing是jquery.sticky.js的内置参数，用来定义粘性元素距离页面底部的最小距离。当页面滚动到这个距离时，粘性元素会从固定定位切换为相对定位，不再继续跟随滚动。
• 用outerHeight(true)获取粘性Div的完整高度（包含padding、border和margin），能保证计算的间距完全准确，不会出现粘性Div和footer重叠的情况。
• 加上resize事件监听，是为了在窗口大小改变时（比如移动端旋转屏幕），重新计算footer的位置，保证效果始终正确。

额外注意点 #

如果你的页面有动态加载的内容（比如异步加载的列表、图片），记得在内容加载完成后重新调用calculateBottomSpacing()并更新sticky的参数，避免因为页面高度变化导致计算值失效。

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