<!--吸顶式导航条-->
<nav class="nav">
<div>
<a href="javascript: return false"><img
src="n.jpg" alt=""></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——*/