廢話不多說，直接上代碼：
1、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>
其中search-box-cover就是控制透明度漸變的背景
2、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; } 3、js
$(function(){ var $body = $('body'); var setCoverOpacity = function() { $body.find('.search-box-cover').css({ opacity: ((($body.scrollTop() / 150) > 0.9) ? 0.9 : ($body.scrollTop() / 150)) }) } //初始化設置背景透明度 setCoverOpacity(); //監聽滾動條事件，改變透明度 $(window).scroll(function() { setCoverOpacity(); }); })最終效果：
注意：
特別注意的一條：強制刷新，會導致頁面的重新加載，所以動態加入的css樣式不會存在，那么對透明背景的初始化非常重要，在網頁端用戶強制刷新，才不會失去透明效果。
1、
((($body.scrollTop() / 150) > 0.9) ? 0.9 : ($body.scrollTop() / 150))
此三目表達式是判斷當前滾動條位置所在位置，如果位置值除以150大于0.9，就返回0.9，反之就返回那個小于等于0.9的值，將返回的值設置為背景的透明度就完成了。
2、由于滾動條的位置是動態獲取的，所以設置透明度會不停改變，不用單獨再做漸變的動畫效果。
3、最終透明度問題，京東在最終背景設置的是0.9，所以本案例也采用的0.9，同時體驗效果會更好。
4、滾動條位置導致的漸變，將150設置更大，漸變的距離會更長。
以上所述是小編給大家介紹的基于JS實現仿京東搜索欄隨滑動透明度漸變效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
