<!--吸顶式导航条-->
<nav class="nav">
???<div>
???????<a href="javascript: return false"><img
???????????????src="n.jpg" ></a>
???????<div class="topNav">
???????????<div>
???????????????<input type="text" placeholder="iPhone 6低至2299元">
???????????????<a href="#"><img src="img/fdj.png"></a>
???????????</div>
???????</div>
???</div>
</nav>
/*吸顶式导航条css样式*/
/*——start——*/
body>nav{
???position: fixed;
???z-index: 1000;
???top: -60px;
???width: 100%;
???height: 60px;
???border-bottom: 1px solid #dfdfdf;
???box-shadow: 0 1px 3px rgba(0,0,0,0.1);
???background-color: #fff;
???transition: top 0.4s ease;
}
body>nav>div{
???width: 1228px;
???margin: 0 auto;
}
body>nav>div>a{
???display: block;
???width: 150px;
???height: 60px;
???float: left;
???margin-right: 47px;
}
body>nav>div>a>img{
???width: 150px;
???height: 60px;
}
/*输入框样式*/
.topNav>div>input{
???width: 702px;
???height: 36px;
???border: 0 none;
???margin-bottom: 1px;
???padding-left: 15px;
???font-size: 14px;
???color: #aaa;
???outline:none;
???line-height: 36px;
}
/*搜索按钮样式*/
.topNav>div>a{
???float: left;
???width: 50px;
???height: 36px;
???border: 0 none;
???margin-left: 700px;
???margin-top: -36px;
???background-color: #ff4040;
???text-align: center;
???line-height: 36px;
???color: #fff;
}
.topNav>div>a>img{
???width: 28px;
???height: 28px;
???margin-top: 2px;
???margin-left: 3px;
}
/*搜索盒子背景样式*/
.topNav>div{
???float: left;
???width: 750px;
???padding: 3px 2px 2px 2px;
???margin-top: 10px;
???border-radius: 2px;
???background-color: #ff4040;
}
/*——end——*/
// 吸顶式导航条js监测
/*——start——*/
var nav = function () {
???var topNav = document.querySelectorAll(".nav");
???/*保存当前Y轴滚动条高度*/
???var onscrHei = pageYOffset;
???if (onscrHei > 670) {
???????topNav[0].style.top = "0px";
???} else {
???????topNav[0].style.top = "-60px";
???}
};
setInterval("nav()", 100);
/*——end——*/
原生js吸顶式导航条
原文地址：http://www.cnblogs.com/AgilityJin/p/7425842.html