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");
}
});
});
.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");
}
});
});
相关文章推荐
- ListView 选中条目样式改变
- Response.Write Table 方式导出Excel 添加样式
- CSS一级导航-天蓝色(带阴影)
- 老生长谈,温故知新:css实现右侧固定宽度,左侧宽度自适应
- 记录部件中GetItemControlByFieldName(字段标签样式设置)用法
- 记录部件中GetItemControlByFieldName(字段标签样式设置)用法
- CSS基本样式
- css3手风琴效果diy
- css实现日历的布局
- hmtl弹出框样式
- LESS CSS 框架简介
- css样式表之边框
- CSS flex让所有灵活的项目都带有相同的长度,忽略它们的内容:
- 学习css3的弹性盒模型
- 【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳
- CSS3阴影 box-shadow的使用和技巧总结[转]
- css 制作三角形
- css 制作三角形/平行四边形
- css图像映射
- js实现css、addClass、removeClass和toggleClass