页眉透明的搜索栏 随着屏幕滑动改变透明度
需积分: 9 67 浏览量
2018-09-06
12:42:59
上传
评论
收藏 8KB DOCX 举报
<!--/////////////////////////////////HTML 搜索框///////////////////////////////////-->
<header class="weui-ex header" style="background-color: rgba(239,54,28,0);" id="header">
<img src="img/logo-text.png" class="sign">
<a class="search-bar weui-ex__item">
<img src="img/icon-search.png" class="icon-serach">
<input placeholder="请输入搜索内容" type="text">
</a>
<a class="phone" href="tel:02086333136">
<img src="img/icon-phone.png" class="phonep"/>
</a>
</header>
<!---------------------------------------------------------------------->
<!--//////////////////////////////////////JS////////////////////////////////////////-->
<script>
$(document).ready(func7on(){
$(window).scroll(func7on(){
var tp = $(window).scrollTop(); //获取像素
if(tp<180 && tp>10){ //如果像素大于 180 就增加透明度
x = 0.5 //这个可以自己调透明度
$("#header").css("background-color","rgba(239,54,28,"+x+")");
}else if(tp<10){
x = 0
$("#header").css("background-color","rgba(239,54,28,"+x+")");
}else{
$("#header").css("background-color","rgba(239,54,28,5)");
}
})
})
\</script>
<!---------------------------------------------------------------------->
<!--//////////////////////////////////////CSS//////////////////////////////////////-->
.header {
posi7on: @xed;
top: 0;
leA: 0;
right: 0;
z-index: 999;
height: 44px;
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
}
.header .sign {
width: 62px;
margin-right: 12px;
margin-leA: 10px;
}
资源评论
