如何实现滚动时固定div，距页脚100px时取消固定效果

要实现你要的效果，得在现有代码基础上增加对页脚位置的判断，具体修改如下：

jQuery(document).scroll(function() {
    var y = jQuery(document).scrollTop(),
        header = jQuery(".box_vine"),
        footer = jQuery("footer"),
        // 计算距离页脚100px时的滚动阈值
        footerOffset = jQuery(document).height() - jQuery(window).height() - 100;

    // 同时满足两个条件：滚动超过100px，且未到达距离页脚100px的位置
    if (y >= 100 && y < footerOffset) {
        header.css({position: "fixed", "top" : "0", "left" : "0"});
    } else {
        header.css("position", "static");
    }
});

关键说明： #

• 如果你页脚有特定类名或ID，把jQuery("footer")替换成对应的选择器，比如jQuery("#footer")或者jQuery(".site-footer")
• footerOffset的计算逻辑：页面总高度减去当前窗口高度，再减去100px，这个值就是滚动到此处时，页面底部距离页脚刚好还有100px的位置
• 滚动事件里新增了y < footerOffset的判断，只有同时满足滚动超过100px且未接近页脚时，才设置fixed定位，否则恢复默认的static定位

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