css 菜单搜索栏 随滚动条滚动 浮起来

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"  οnkeydοwn="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" οnclick="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");
}


});


});

最后

以上就是任性小海豚为你收集整理的css 菜单搜索栏 随滚动条滚动 浮起来的全部内容，希望文章能够帮你解决css 菜单搜索栏 随滚动条滚动 浮起来所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。