基于JS实现仿京东搜索栏随滑动透明度渐变效果
废话不多说，直接上代码：
1、HTML
Box">
其中search-Box-cover就是控制透明度渐变的背景
2、css
rush:js;">
.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;
}
.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;
}
3、js
0.9) ? 0.9 : ($body.scrollTop() / 150))
})
}
//初始化设置背景透明度
setCoverOpacity();
//监听滚动条事件，改变透明度
$(window).scroll(function() {
setCoverOpacity();
});
})
最终效果：
imsun; white-space: normal; word-spacing: 0px; text-transform: none; font-weight: normal; color: rgb(0,0); font-style: normal; text-align: center; orphans: 2; widows: 2; letter-spacing: normal; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px">
注意：
特别注意的一条：强制刷新，会导致页面的重新加载，所以动态加入的css样式不会存在，那么对透明背景的初始化非常重要，在网页端用户强制刷新，才不会失去透明效果。
1、
0.9) ? 0.9 : ($body.scrollTop() / 150))
此三目表达式是判断当前滚动条位置所在位置，如果位置值除以150大于0.9，就返回0.9，反之就返回那个小于等于0.9的值，将返回的值设置为背景的透明度就完成了。
2、由于滚动条的位置是动态获取的，所以设置透明度会不停改变，不用单独再做渐变的动画效果。
3、最终透明度问题，京东在最终背景设置的是0.9，所以本案例也采用的0.9，同时体验效果会更好。
4、滚动条位置导致的渐变，将150设置更大，渐变的距离会更长。
以上所述是小编给大家介绍的基于JS实现仿京东搜索栏随滑动透明度渐变效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
