js实现：仿京东搜索栏随滑动透明度渐变

注意：不兼容IE8及以下，IE11和360的IE兼容模式测试通过====IE8不支持opacity

此效果采用的opacity做的透明渐变

html部分

<header class="module-layer">
    <div class="module-layer-content">
        <div class="search-box-cover"></div> <!--控制透明度渐变的背景-->
        <p class="layer-return"></p>
        <h1 class="layer-head-name">
            <div class="pr search-box">
                <img class="shop-search" src="images/search.png"/>
                <input id="shop-input" type="text" placeholder="搜索店内商品" value="" />
            </div>
        </h1>
        <p class="layer-share"></p>
    </div>
</header>

css部分

.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;
}