css:
.nav{
width: 100%;
height: 68px;
background: #00a2ca;
filter:alpha(opacity=85);
opacity:0.85;
z-index: 2;
}
.nav .nav-main {
position: relative;
z-index: 2;
transition: width .2s;
width: 1110px;
}
.nav-fixed {
box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.menudivstatic{
position: static; left: auto; top: auto; bottom: auto;
}
.menudivfloat{
position: fixed; left: 0px; top: 0px; bottom: auto;
}
html:
<nav class="nav menudivstatic">
<div class="nav-main" style="height: 76px;min-width:1190px;width: 100%;position: relative;">
<div style="float:left;width: 450px;margin-left:60px;"><a href="<%=basePath%>"><img src="codebase/logo1.png" /> </a></div>
<div class="form">
<input clstag="h|keycount|2015|03a" type="text" onkeydown="javascript:if(event.keyCode==13) search('key');" autocomplete="off" id="key" accesskey="s" class="text" style="color: rgb(153, 153, 153);">
<button clstag="h|keycount|2015|03c" onclick="search('key');return false;" class="button cw-icon"><i></i>搜索</button>
</div>
</div>
</nav>
js:
$(function(){
$(window).scroll(function(){
var height = $(window).scrollTop();
if(height > 100){
$(".nav").removeClass("menudivstatic").addClass("nav-fixed").addClass("menudivfloat");
}else{
$(".nav").removeClass("nav-fixed").removeClass("menudivfloat").addClass("menudivstatic");
}
});
});