js全名JavaScript是互联网上最流行的脚本语言，这门语言可用于HTML和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
工具/原料
电脑
前端编辑工具
方法/步骤
1、第一步：实现思路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和IEexpression
2、第二步：编辑代码。打开编辑器：输入代码，如下所示<!doctypehtml>争犸禀淫<html><head><metacharset=&鳎溻趄酃quot;utf-8"><title>吸顶测试</title><style>*{margin:0;padding:0;}#xidTop{width:100%;height:50px;background:skyblue;}</style><script>window.onload=function(){varoDiv=document.getElementById('xidTop');vardivT=oDiv.offsetTop;//console.log(divT);window.onscroll=function(){//获取当前页面的滚动条纵坐标位置（依次为火狐谷歌、safari、IE678）varscrollT=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;if(scrollT>=divT){if(window.navigator.userAgent.indexOf('MSIE6.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;}}elseoDiv.style.position='';}}</script></head><body><div>上面<br>上面<br>上面<br>上面<br>上面<br>上面<br>上面<br><divid="xidTop">吸顶：主要实现当位置将要超过div初始top时，让其置顶。</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>
3、第三步：测试。打开浏览器--向下滚动鼠标或左键单击页面滚动条上下拖动--可以看到div在不会被隐藏。测试成功！
4、第五步：总结。实现思路的基本条件是：滚动条的滚动事件的监控，在辅以样式的控制使用定位来完成。优化：可以使用jquery的滚动监听事件，jquery已经处理了浏览器兼容的问题，开发更加方便。$(window).bind("scroll",function(){//当滚动条滚动时处理代码});