第9章 JavaScript网页特效-补充案例.docVIP

第8章 JavaScript编程基础 PAGE 2 PAGE 18 第9章补充案例 【案例9-1】固定导航栏 一、案例描述 考核知识点 滚动条scroll系列、position定位元素、onscroll滚动条事件 练习目标 掌握onscroll滚动条事件的使用 掌握position定位元素的方法 需求分析 固定导航栏效果在网页中非常常见，实现思路是当我们滚动界面的时候，被卷曲的头部超过第二个盒子距离顶部的位置，那么直接给第二个盒子加类名.fixed，当我们滚动界面的时候，被卷曲的头部小于第二个盒子距离顶部的位置，那么直接给第二个盒子取消类名.fixed。 案例分析 效果如下图9-1、9-2所示。 页面初始状态 固定导航栏效果 具体实现步骤如下： 获取被卷曲的头部的距离。 判断被卷曲的头部的大小 被卷曲的头部大于顶部元素的高度添加类名，否则删除类名 二、案例实现 根据上面的分析，编写HTML页面结构，具体代码如下： div?class=top?id=top ????img?src=images/top.png?alt=?/ ??/div ??div?id=Q-nav1 ????ul ??????li体育首页/li ??????li中国足球/li ??????li亚冠/li ??????li中超/li ??????li国足/li ??????li中甲/li ??????li视频直播