#fca72b 100%);}#wrap{background-color: rgba(0
首先写HTML构造
<body> <div></div> </body> 二、CSS样式给点简单的样式
<style> *{ margin: 0; padding: 0; } body{ height: 2000px; background-image: linear-gradient(-180deg, #15f09d 0%, #25A0FF 50%, #fca72b 100%); } #wrap{ background-color: rgba(0,0,0,0.2); width: 100%; height: 100px; margin-top: 100px; } #wrap[data-fixed="fixed"]{ position: fixed; top:0; left: 0; margin: 0; } </style> 三、JS代码 1、面向过程直接编写5行代码搞定
<script> var obj = document.getElementById("wrap"); var ot = obj.offsetTop; document.onscroll = function () { var st = document.body.scrollTop || document.documentElement.scrollTop; obj.setAttribute("data-fixed",st >= ot?"fixed":"")} </script> 2、面向东西JS改造，封装成吸顶函数 ceiling.js 便利以后直接Ctrl+C，Ctrl+V
封装要领 /* * 封装吸顶函数，，需结合css实现。 * 也可以直接用js转变样式，可以自行改削。 */ function ceiling(obj) { var ot = obj.offsetTop; document.onscroll = function () { var st = document.body.scrollTop || document.documentElement.scrollTop; /* * 在这里我给obj添加一个自界说属性。className可能会影响原有的class * 三元运算使代码更简洁 */ obj.setAttribute("data-fixed",st >= ot?"fixed":""); } } 挪用要领 <script src="http://www.mamicode.com/ceiling.js"></script> <script> window.onload = function () { /*获取导航东西*/ var wrap = document.getElementById("wrap"); ceiling(wrap) /*挪用吸顶函数 */ }; </script>这是最简单版本，欢迎大家在此根本上改造。
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31362.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")