您的位置:首页 > Web前端 > CSS

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

2015-11-10 16:11 513 查看
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");
}

});

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: