如何使用jQuery实现滚动到指定位置后页脚淡入的效果

核心错误点 #

• 链式调用逻辑错误：你在fadeIn前调用了show()，show()会直接将footer设为完全可见状态，后续fadeIn的淡入动画没有执行空间，自然看不到过渡效果；反之hide().fadeOut()中hide()直接隐藏了元素，fadeOut同样无法生效。
• 没有做动画去重处理：滚动事件触发频率极高，每次滚动都会重复执行动画逻辑，会造成动画队列堆积，即便修改调用顺序也可能出现卡顿、动画反复执行的问题。
• 缺少初始样式配置：如果没有给footer设置初始隐藏的CSS属性，页面加载时footer会直接显示，也会导致预期效果失效。

修复代码 #

1. 新增CSS样式 #

footer {
  display: none;
  /* 原有footer样式正常保留即可 */
}

2. 修改JS逻辑 #

jQuery(function($){
    // 提前缓存footerDOM对象，避免滚动时重复查询DOM提升性能
    const $footer = $('footer');
    $(document).scroll(function () {
        const y = $(this).scrollTop();
        if (y > 1000) {
            // 仅当footer处于隐藏状态时才执行淡入，避免重复触发动画
            if ($footer.is(':hidden')) {
                $footer.stop(true).fadeIn("slow");
            }
        } else {
            // 仅当footer处于显示状态时才执行淡出
            if ($footer.is(':visible')) {
                $footer.stop(true).fadeOut();
            }
        }
    });
});

关键修改说明 #

• 删除了多余的show()、hide()调用，fadeIn、fadeOut本身就会处理元素的显示隐藏状态切换，不需要额外调用。
• 增加了元素可见状态判断，只有需要切换状态时才执行动画，避免无意义的重复调用。
• 增加了stop(true)配置，每次执行新动画前清空之前累积的动画队列，避免多次快速滚动时动画排队执行出现卡顿。
• 提前缓存了footer选择器，减少滚动时的DOM查询开销，优化滚动性能。

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