<div class="i-gd-header" id="header" style="background: rgba(255,255,255,0)">
<div class="i-gd-header-left" onclick="closeWindiw(isApp)"><i class="iconfont icon-fanhui"></i></div>
<div class="i-gd-header-center">商品详情</div>
<div class="i-gd-header-right">
<div class="iconfont icon-xin"></div>
<div class="iconfont icon-fenxiang3"></div>
</div>
</div>.i-gd-header {
position: fixed;
top: 0;
left: 0;
z-index: 91;
width: 100%;
background-color: #fff;
display: flex;
align-items: center;
font-size: 14px;
height: 45px;
}
.i-gd-header-left {
width: calc(30% - 20px);
padding: 0 10px;
}
.i-gd-header-left i {
font-weight: bold;
color: #333;
}
.i-gd-header-center {
text-align: center;
width: 40%;
font-size: 16px;
color: rgba(0,0,0,0);
}
.i-gd-header-right {
width: calc(30% - 20px);
padding: 0 10px;
display: flex;
align-items: center;
flex-direction: row-reverse;
}
.i-gd-header-right .iconfont{
color: #fff;
font-size: 16px;
z-index: 99;
background: #666;
margin-left: 8px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}$(document).scroll(function() {
var scroH = $(document).scrollTop(); //滚动高度
var nums = scroH/500;//距离顶部高度超过500px时完全不透明
$(".i-gd-header-center").CSS("color",'rgba(0,0,0,'+nums+')');
$(".i-gd-header").css("background",'rgba(255,255,255,'+nums+')');
$(".i-gd-header-right .iconfont").css("background",'rgba(102, 102, 102,'+(1 - nums)+')');
$(".i-gd-header-right .iconfont").css("color",'rgb('+(255 - ((255 - 102)/2)*nums)+', '+(255 - ((255 - 102)/2)*nums)+', '+(255 - ((255 - 102)/2)*nums)+')');
});
