《WEB前端开发实战》课件 2任务3：页面头部固定

第三章

JavaScript网页特效制作任务三

页面头部固定特效制作主讲：谭少谋htmlh5imgjavascriptwebcsscolorhr目录任务情境任务目标任务描述任务实施学习资源考核评价课后拓展htmlh5imgjavascriptwebcolorhr任务情境广西少数民族文化资源网是一个通过网站展示广西少数民族在文化、节日、美食、古迹等方面资源的的综合性资源类的网站。其中的服饰页面头部的内容我们需要将其固定于页面顶端，为了完成这个内容就需要加入JavaScript特效。工作任务单工作任务单任务要求根据效果图完成服饰详情页头部固定制作甲方提供的设计图

如右图所示评判标准1.能够正确的分析页面特效2.能够进行正确的获取页面元素3.能够正确的使用if循环嵌套4.能够正确的编写事件代码5.能够正确的使用Windows滚动属性1+X技能考核标准能正确选择addEventListener绑定事件完成页面特效制作作品提交要求站点文件夹评判标准1.能够正确的分析页面特效2.能够进行正确的获取页面元素3.能够正确的使用if循环嵌套4.能够正确的编写事件代码5.能够正确的使用Windows滚动属性任务目标任务目标能够掌握querySelector（）方法获取html中页面头部元素；能够正确使用if条件语句嵌套判断窗口宽度、页面头部位置等；能够正确使用监听器与滚动指定元素事件的用法；能够正确使用offsetTop方法与window.screen对象从而完成头部固定特效的制作；任务描述本任务是基于服饰详情页进行JavaScript的制作。任务要求是网页滑轮往上或者往下移动时，页面头部内容始终保持呈现在页面顶部。我们将通过完成广西少数民族文化资源网中的服饰详情页头部部分固定，进一步学习如何利用JavaScript完成头部固定特效。任务实施图2

效果图（有特效）图1

效果图（无特效）效果图展示编写JS特效重构html+css找出原页面头部的HTML修改html找出原页面头部的CSS修改CSS步骤一步骤二步骤三步骤四重构html+css操作步骤步骤六效果图展示编写JS特效任务实施重构html+css链接外部JavaScript文件获取页面元素判断位置方法获取屏幕宽度步骤一步骤二步骤三步骤四编写JS特效操作步骤设置监听事件步骤五获取滚动像素步骤六页面元素固定步骤七效果图展示重构html+css编写JS特效任务实施学习资源获取用户屏幕信息流程控制语句addEventListener()监听事件scroll事件流程控制语句

通过一些特殊结构可以让js代码加载时，要么可以跳过一部分不加载，或者可以循环加载一段代码。◎控制流语句

控制流语句就是控制代码运行的方向，分支。它里面包含了三种方法：if语句、if...else语句和switch语句。◎循环语句

循环结构是程序中一种很重要的结构。其特点是，在给定条件成立时，重复执行某程序段，直到条件不成立为止。给定的条件成为循环条件，反复执行的程序段称为循环体。JavaScript语言提供了二种不同形式的循环结构，分别是for循环结构和while循环结构。

学习资源流程控制语句获取用户屏幕信息addEventListener()监听事件scroll事件◎获取用户屏幕信息1.window.screen对象：包含有关用户屏幕的信息。并且window.screen对象在编写时可以不使用window这个前缀。2.window.screen对象有哪些：（1）screen.width：屏幕的宽。（2）screen.height：屏幕的高。（3）screen.availWidth：可利用的宽，等于屏幕的宽。（4）screen.availHeight：可利用的高，等于屏幕的高减去mac顶部栏或windows底部栏。（5）screenTop：浏览器窗口左上角到屏幕上边缘的距离。（6）screenLeft：浏览器窗口左上角到屏幕左边缘的距离。（7）screenX：等于

screenLeft。（8）screenY：等于

screenY。3.Window滚动的像素属性有哪些：（1）PageXOffset;返回文档在窗口左上角水平滚动的像素。用法：设置或返回当前页面相对于窗口显示区左上角的X位置。（2）pageYOffset;返回文档在窗口垂直方向滚动的像素。学习资源用户屏幕信息scroll事件addEventListener()监听事件流程控制语句◎scroll事件1.什么是scroll事件？scroll翻译过来的意思就是滚动。在javascript中，虽然scroll事件在window对象上发生的，但它实际表示的则是页面中相应元素的变化。2.scroll事件在本任务中的作用是什么呢？在本次任务中，用户在浏览页面时会往下浏览页面，当页面滚轮随用户往下滑动时，便会触发scroll事件，从而调用If条件语句对页面头部位置进行判断。学习资源scroll事件addEventListener()监听事件用户屏幕信息◎addEventListener（）监听事件让计算机等待某个事件的发生，当这个事件发生之后，对其做出一个相应行为，如等待鼠标单击按钮，单击发生时打开一个新的页面；但是你写的监听事件发现这件事情后，会进行阻止，让其无法跳转。流程控制语句语法：element.addEventListener(event,

function,

useCapture)event：必须存在。字符串，指定事件名。Function：必须存在。指定要事件触发时执行的函数。

useCapture：可写也可以不写。布尔值，指定事件是否在捕获或冒泡阶段执行。考核评价班级：姓名：学号任务名称：页面头部固定评价项目评价标准自评情况考核情况课前自主探究（10%）完成课前学习通中下发任务£完成£基本完成R未完成□完成□基本完成□未完成工作过程（50%）JS特效分析能够进行正确的分析特效所需的JS方法□完成□基本完成□未完成□完成□基本完成□未完成

获取页面元素能够进行正确获取页面元素□完成□基本完成□未完成□完成□基本完成□未完成

if语句编写能够正确使用IF嵌套循环□完成□基本完成□未完成□完成□基本完成□未完成

事件监听能够正确编写事件代码□完成□基本完成□未完成□完成□基本完成□未完成

Window滚动像素属性能够正确应用window滚动像素属性□完成□基本完成□未完成□完成□基本完成□未完成项目成果（30%）工作完整能够按时完成任务□是□是

工作规范能按企业规范要求进行操作□是□是

成果展示能准确表达，汇报成果□是□是非技术考评（10%）态度学习态度是否端正□是□是

纪律遵守纪律□是□是

协作有交流、团队合