搜索栏背景（透明度）随滑动渐变

浏览：926次- 评论：0次- 发布时间：2017-09-07

Html

Css

body,p,h1 {
	margin:0;
}
.module-layer {
	width:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:100000;
}
.module-layer-content {
	position:relative;
	min-width:320px;
	max-width:750px;
	width:100%;
	margin:0 auto;
}
.module-layer-bg {
	width:100%;
	height:100%;
	background:#000;
	opacity:.7;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
}
.layer-head-name {
	height:50px;
	line-height:50px;
	text-align:center;
	padding:0 50px;
	font-size:20px;
}
.layer-return,.layer-share {
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	position:absolute;
	top:0;
	z-index:1;
}
.layer-return {
	left:0;
}
.layer-share {
	right:0;
}
.fixed-layer {
	height:100%;
	display:none;
	z-index:100001;
}
.relative-layer {
	height:100%;
}
.layer-content {
	padding:3%;
	position:relative;
	top:20%;
}
.layer-close {
	width:2rem;
	height:2rem;
	position:absolute;
	top:3%;
	right:3%;
}
.pr {
	position:relative;
}
#shop-input::-webkit-input-placeholder {
	color:#fff;
}
#shop-input:-moz-placeholder {
	color:#fff;
}
#shop-input::-moz-placeholder {
	color:#fff;
}
#shop-input:-ms-input-placeholder {
	color:#fff;
}
#shop-input {
	border:none;
	outline:none;
	background:transparent;
}
.search-box {
	height:30px;
	border-radius:20px;
	top:10px;
	overflow:hidden;
	z-index:10;
}
.search-box:after {
	content:'';
	display:block;
	width:100%;
	height:30px;
	background:#fff;
	opacity:.5;
	position:absolute;
	top:0;
	left:0px;
	z-index:-1;
}
#shop-input {
	height:28px;
	line-height:28px;
	font-size:16px;
	position:absolute;
	top:0;
	left:30px;
}
.shop-search {
	width:16px;
	height:16px;
	position:absolute;
	top:7px;
	left:6px;
}
.layer-return {
	background:url(images/return.png) no-repeat center center/12px 20px;
}
.layer-share {
	background:url(images/share.png) no-repeat center center/20px 30px;
}
a {
	-webkit-tap-highlight-color:transparent;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
}
.search-box-cover {
	background:#d9241c;
	width:100%;
	height:50px;
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	opacity:0;
}
.module-content {
	min-width:320px;
	max-width:750px;
	width:100%;
	margin:0 auto;
	background:#fff;
}
.module-content div:first-child img {
	margin-top:0;
}
.module-content div img {
	display:block;
	width:100%;
	margin-top:10px;
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：移动端搜索栏背景透明度随滑动渐变，web端导航随滑动改变背景色

1，通过单独的背景“<div class="search-box-cover"></div>”，来改变它的透明度，实现搜索栏或者导航栏的背景渐变。

2，setCoverOpacity设置透明度函数必须初始化，防止用户浏览器刷新导致搜索栏（导航）丢失背景。

3，$body.scrollTop() / 550渐变距离的设置，该范围是在0--550之间背景透明度渐变。你可以将550变大或者变小，调到你合适的时候。

4，透明度的变化范围在0-0.9之间，你可以根据需求调节。

5，注意：你的渐变距离必须比你的页面高度小，防止滑动到底部还未渐变完成。

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取