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

第三章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对象上发生的，但它实际表示的则是页面中相应元素的