原生JavaScript实现导航栏吸顶功能
这个功能涉及到几个函数的运用：
getBoundingClientRect()：用于获取元素相对于视窗的位置集合，包含top，right，bottom，left等。
createElement()：用于创建新的元素或者标签。
parentNode： 返回父级节点。
replaceChild(A，B)：将B节点替换为A节点。
A.appendChild(B)：把B中的元素添加到A。
offsetTop：表示距离浏览器顶部的距离。
scrollTop：表示距离上一层元素的上边距的距离。
废话不多说，上代码！！！
html：
<div class="warp"><div class="header" > <h1>测试标题</h1><p>测试测试测试测试测试测试测试测试。。。</p></div><div id="nav" ><ul><li>测试测试</li><li>测试测试</li><li>测试测试</li><li>测试测试/li><li>测试测试</li></ul> </div> <div class="content"><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p></div>
css:
*{margin: 0;padding: 0;}.warp{width: 100%;height: 1600px;background-color: aquamarine;}.header{width:635px; margin: 0 auto;height: 74px;}#nav{width: 635px; height:45px;margin: 0 auto;}#nav li{float: left;list-style: none;width: 127px;text-align: center; background-color: blueviolet;height: 35px;}#nav li{line-height: 35px;color: #fff;}.content{width: 635px; margin: 0 auto; margin-top: 40px; text-align: center;}.fix{position: fixed; top: 0; left: 0;right:0;}
js:
var tit = document.getElementById("nav");var rect = tit.getBoundingClientRect(); var inser = document.createElement("div") ; tit.parentNode.replaceChild(inser,tit); inser.appendChild(tit); inser.style.height = rect.height + "px";var titleTop = tit.offsetTop; document.onscroll = function(){var btop = document.body.scrollTop||document.documentElement.scrollTop; if(btop>titleTop){tit.className = "fix";}else{tit.className = "clearfix";}}
仅供参考，欢迎指点！
