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

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

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

html部分

 1 <header class="module-layer">
 2     <div class="module-layer-content">
 3         <div class="search-box-cover"></div> <!--控制透明度渐变的背景-->
 4         <p class="layer-return"></p>
 5         <h1 class="layer-head-name">
 6             <div class="pr search-box">
 7                 <img class="shop-search" src="images/search.png"/>
 8                 <input id="shop-input" type="text" placeholder="搜索店内商品" value="" />
 9             </div>
10         </h1>
11         <p class="layer-share"></p>
12     </div>
13 </header>

css部分

 1 .module-layer {
 2     width:100%;
 3     position:fixed;
 4     top:0;
 5     left:0;
 6     z-index:100000;
 7 }
 8 .module-layer-content {
 9     position:relative;
10     min-width:320px;
11     max-width:750px;
12     width:100%;
13     margin:0 auto;
14 }
15 .module-layer-bg {
16     width:100%;
17     height:100%;
18     background:#000;
19     opacity:.7;
20     position:absolute;
21     top:0;
22     left:0;
23     z-index:-1;
24 }
25 .layer-head-name {
26     height:50px;
27     line-height:50px;
28     text-align:center;
29     padding:0 50px;
30     font-size:20px;
31 }
32 .layer-return,.layer-share {
33     width:50px;
34     height:50px;
35     line-height:50px;
36     text-align:center;
37     position:absolute;
38     top:0;
39     z-index:1;
40 }
41 .layer-return {
42     left:0;
43 }
44 .layer-share {
45     right:0;
46 }
47 .pr {
48     position:relative;
49 }
50 #shop-input::-webkit-input-placeholder {
51     color:#fff;
52 }
53 #shop-input:-moz-placeholder {
54     color:#fff;
55 }
56 #shop-input::-moz-placeholder {
57     color:#fff;
58 }
59 #shop-input:-ms-input-placeholder {
60     color:#fff;
61 }
62 #shop-input {
63     border:none;
64     outline:none;
65     background:transparent;
66 }
67 .search-box {
68     height:30px;
69     border-radius:20px;
70     top:10px;
71     overflow:hidden;
72     z-index:10;
73 }
74 .search-box:after {
75     content:'';
76     display:block;
77     width:100%;
78     height:30px;
79     background:#fff;
80     opacity:.5;
81     position:absolute;
82     top:0;
83     left:0px;
84     z-index:-1;
85 }
86 #shop-input {
87     height:28px;
88     line-height:28px;
89     font-size:16px;
90     position:absolute;
91     top:0;
92     left:30px;
93 }