huanggr
在前端项目的制作中，有一些效果需要是需要javascript来进行控制的,有些项目需求是这样，当顶部的导航移动到某个位置的时候，导航就固定住了，并且样式有的也会发生些许的变化，那么我们如何去实现呢，接下来国瑞前端就来为大家解析一波。
需求分析：
我们首先需要写好样式，然后当页面滚动到固定位置的时候，页面进行变化，导航栏被固定，然后样式发生改变（删除类名和添加类名）
源码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>div移动到顶部固定住</title> <style> * { margin:0; padding:0; } </style> </head> <body style="height:2000px;"> <div style="height: 200px;"></div> <div id="navfixed" style="position:relative;top:0;background:#ccc;width:100px; height:100px;width:100%"> 导航固定顶部 </div> <script type="text/javascript"> function menuFixed(id) { var obj = document.getElementById(id); // 获取到的dom元素距离顶部的高度 var _getHeight = obj.offsetTop; window.onscroll = function () { // 滚动传入id和距离 changePos(id, _getHeight); } } //判断高度是否达到固定点 function changePos(id, height) { var obj = document.getElementById(id); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop < height) { obj.style.position = 'relative'; } else { obj.style.position = 'fixed'; } } //开局加载 window.onload = function () { menuFixed('navfixed'); } </script> </body> |
7