首页 > 代码库 > 导航部分顶起部分
导航部分顶起部分
1.html部分
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } img { vertical-align: top; } .main { margin: 0 auto; width: 1000px; margin-top: 10px; } #Q-nav1 { overflow: hidden; } .fixed { position: fixed; top: 0; left: 0; } </style> <!--引入工具js--> <script src="http://www.mamicode.com/my.js"></script> <script> window.onload = function () { //需求1:当我们滚动界面的时候,被卷曲的头部超过第二个盒子距离顶部的位置,那么直接给第二个盒子加类名.fixed //需求2:当我们滚动界面的时候,被卷曲的头部小于第二个盒子距离顶部的位置,那么直接给第二个盒子取消类名.fixed //步骤: //1.老三步。 //2.判断 ,被卷曲的头部的大小 //3.满足条件添加类,否则删除类 //1.老三步。 var topDiv = document.getElementById("top"); var height = topDiv.offsetHeight; var middle = document.getElementById("Q-nav1"); var main = document.getElementById("main"); window.onscroll = function () { //2.判断 ,被卷曲的头部的大小 if(scroll().top > height){ //3.满足条件添加类,否则删除类 middle.className += " fixed"; //第二个盒子不占位置了,所以我们给第三个盒子一个上padding占位置,不出现盒子抖动问题 main.style.paddingTop = middle.offsetHeight+"px"; }else{ middle.className = ""; //清零 main.style.paddingTop = 0; } } } </script> </head> <body> <div class="top" id="top"> <img src="http://www.mamicode.com/images/top.png" /> </div> <div id="Q-nav1"> <img src="http://www.mamicode.com/images/nav.png" /> </div> <div class="main" id="main"> <img src="http://www.mamicode.com/images/main.png" /> </div> </body> </html>
2.JS部分
/** * Created by andy on 2015/12/8. */ function scroll() { // 开始封装自己的scrollTop if(window.pageYOffset !== undefined) { // ie9+ 高版本浏览器 // 因为 window.pageYOffset 默认的是 0 所以这里需要判断 return { left: window.pageXOffset, top: window.pageYOffset } } else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } } return { // 未声明 DTD left: document.body.scrollLeft, top: document.body.scrollTop } } //缓动动画封装 function animate(ele,target) { clearInterval(ele.timer); ele.timer = setInterval(function () { var step = (target-ele.offsetLeft)/10; step = step>0?Math.ceil(step):Math.floor(step); ele.style.left = ele.offsetLeft + step + "px"; console.log(1); if(Math.abs(target-ele.offsetLeft)<Math.abs(step)){ ele.style.left = target + "px"; clearInterval(ele.timer); } },18); }
导航部分顶起部分
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。