js实现吸顶效果,js吸顶效果实现思路如下： 1. div初始居普通文档流中 2. 给window添加scroll事件（可事件节流），获取div的offset的top值，滚动时scrollTop值和top比较，当到达top时给div添加一个fixed的class使其固定 3. 向上滚动时当到达div初始top时则删除fixed的class，此时div又回到普通文档流中 4. fixed样式非IE6浏览器使用position:fixed，IE6使用position:absolute和IE expression 效果图： 
代码如下： <!doctype html><html><head> <meta charset="utf-8"> <title>无标题文档</title> <style> * { margin: 0; padding: 0; } #div1 { width: 100%; height: 50px; background: skyblue; } </style> <script> window.onload = function() { var oDiv = document.getElementById('div1'); var divT = oDiv.offsetTop; //console.log(divT); window.onscroll = function() { // 获取当前页面的滚动条纵坐标位置 （依次为火狐谷歌、safari、IE678） var scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if (scrollT >= divT) { if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) { // 兼容IE6代码 oDiv.style.position = 'absolute'; oDiv.style.top = scrollT + 'px'; oDiv.style.left = 0 + 'px'; } else { // 正常浏览器代码 oDiv.style.position = 'fixed'; oDiv.style.top = 0; oDiv.style.left = 0; } } else oDiv.style.position = ''; } } </script></head><body> <div class="all"> 以上<br> 以上<br> 以上<br> 以上<br> 以上<br> 以上<br> 以上<br> <div id="div1"></div> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> 啦啦啦啦啦<br> </div></body></html>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持wanshiok.com！
js实现吸顶效果,js吸顶效果
|
