本次要实现的是一种常见的网页效果,如下:
页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下所示:
我们分三步实现上面的效果。
首先是页面的基础结构,为了简化操作,将头部、导航部分和主体内容部分全部用图片表示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; border:none } img{ vertical-align: top; width: 100%; } section{ width: 70%; margin: 0 auto; } </style> </head> <body> <header id="head"> <img src="images/top.png" alt=""> </header> <nav id="nav"> <img src="images/nav.png" alt=""> </nav> <section> <img src="images/body01.png" alt=""> <img src="images/body02.png" alt=""> </section> </body> </html>
此时,一个基本的页面效果已经出来了,我们再来做一个提前准备,就是监听滚动事件,所以需要用到上一篇所封装的方法和之前用的根据id获取元素方法:
<script> function scroll() { if(window.pageYOffset !== null){ return { top: window.pageYOffset, left: window.pageXOffset } }else if(document.compatMode === "CSS1Compat"){ // W3C return { top: document.documentElement.scrollTop, left: document.documentElement.scrollLeft } }else{ return { top: document.body.scrollTop, left: document.body.scrollLeft } } } function $(id) { return typeof id === "string" ? document.getElementById(id) : null; }</script>
至此,所有的准备都完成了,我们再来分析理想的效果:当浏览器发生滚动时,页面向上卷起,直到顶部完全卷起,即浏览器的卷起部分等于导航部分最初距离顶部边缘的距离,此时,吸顶的部分即导航部分位于浏览器顶部,继续滚动时,主体部分发生了滚动,但导航部分的位置不再发生变化:
1,找到临界位置,卷起高度==初始化时导航部分距离浏览器顶部的高度
2,赋予导航部分吸顶效果:position:fixed
3,卷起高度变大时,继续吸顶,卷起高度变小时,取消吸顶
根据上面的分析,我们前面的基础上继续完善代码:
<style> .nav{ position: fixed; left: 0; top:0; width: 100%; } </style> <script> window.onload = function () { // 1. 求出offsetHeight var nav_top_height = $("nav").offsetTop; // 2. 监听窗口滚动 window.onscroll = function () { var scroll_top_height = scroll().top; console.log(scroll_top_height); // 2.1 判断 if(scroll_top_height >= nav_top_height){ $("nav").className = "nav"; }else { $("nav").className = ""; } } } </script>
这样,简易的吸顶效果就实现了,完整代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; border:none } img{ vertical-align: top; width: 100%; } section{ width: 70%; margin: 0 auto; } .nav{ position: fixed; left: 0; top:0; width: 100%; } </style> </head> <body> <header id="head"> <img src="images/top.png" alt=""> </header> <nav id="nav"> <img src="images/nav.png" alt=""> </nav> <section> <img src="images/body01.png" alt=""> <img src="images/body02.png" alt=""> </section> <script> function scroll() { if(window.pageYOffset !== null){ return { top: window.pageYOffset, left: window.pageXOffset } }else if(document.compatMode === "CSS1Compat"){ // W3C return { top: document.documentElement.scrollTop, left: document.documentElement.scrollLeft } }else{ return { top: document.body.scrollTop, left: document.body.scrollLeft } } } function $(id) { return typeof id === "string" ? document.getElementById(id) : null; } window.onload = function () { // 1. 求出offsetHeight var nav_top_height = $("nav").offsetTop; // 2. 监听窗口滚动 window.onscroll = function () { var scroll_top_height = scroll().top; console.log(scroll_top_height); // 2.1 判断 if(scroll_top_height >= nav_top_height){ $("nav").className = "nav"; }else { $("nav").className = ""; } } } </script> </body> </html>
完整详细代码下载:点这里
原文地址:https://www.cnblogs.com/yuyujuan/p/9657721.html
时间: 2024-11-06 07:12:19