JavaScript 实现滚动时固定层显隐功能

实现原理

核心逻辑分为三个部分：

1. 监听滚动：绑定 window 对象的 scroll 事件。
2. 获取位置：实时读取当前文档滚动的垂直距离 T。
3. 条件判断：将 T 与目标触发点的高度进行比对，决定执行展开还是收起动作。

第1步：准备 HTML 结构

首先需要构建包含需要控制的固定区域和足够内容的页面骨架。固定区域通常使用 position: fixed; 使其脱离正常文档流，并初始状态设为隐藏。

<div style="display:none; position:fixed; top:0px; width:100%;" class="fixed-box-wrap">
  <img class="tp" src="001.jpg" />
  <div class="header-wrap" style="color:red;">提示内容</div>
</div>

<!-- 页面主体内容，用于产生滚动条 -->
<div style="height: 2000px;">
  这里是页面的主要内容...
</div>

第2步：引入依赖库

为了简化操作，示例中使用经典的 jQuery 库来处理 DOM 查询和动画。确保页面头部已正确引入文件。

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

第3步：编写 JS 逻辑代码

在 head 或页面底部添加以下脚本。代码定义了一个变量 T 用于存储滚动高度，并在每次滚动发生时更新该值并执行判断。

<script type="text/javascript">
var T=0;
$(window).scroll(function() {
    // 获取当前滚动条垂直偏移量
    T=$(document).scrollTop();
    
    // 判断条件：当滚动超过 header-wrap 的高度时
    if(T>=$(".header-wrap").height()){
        // 向下滚动超过阈值，显示固定层（800毫秒动画时长）
        $(".fixed-box-wrap").slideDown(800);
    } else {
        // 回到上方区域，隐藏固定层
        $(".fixed-box-wrap").slideUp(800);
    }
});
</script>

关键点解析

• .header-wrap 是一个参考点，当用户向下滚动经过该元素所在高度后，下方的固定层才会显现。
• slideDown(800) 和 slideUp(800) 中的数字代表动画持续时间（毫秒），可根据需求调整以实现更快的响应或更柔和的效果。
• 此方案依赖于 jQuery 的 DOM 就绪机制，确保在页面加载完成后执行绑定操作。

以上就是基于 JavaScript 和 jQuery 实现鼠标向下滑动加载 div 功能的详细内容，更多关于前端交互特效设计的资料请关注本站其它相关文章！