快捷導(dǎo)航

基于JS實(shí)現(xiàn)仿京東搜索欄隨滑動(dòng)透明度漸變效果

更新時(shí)間：2017年07月10日 11:17:17 作者：Rattenking

這篇文章主要介紹了基于JS實(shí)現(xiàn)仿京東搜索欄隨滑動(dòng)透明度漸變效果,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

廢話不多說(shuō)，直接上代碼：

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="搜索店內(nèi)商品" 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)) 
  }) 
 } 
//初始化設(shè)置背景透明度 
 setCoverOpacity(); 
//監(jiān)聽滾動(dòng)條事件，改變透明度 
 $(window).scroll(function() { 
  setCoverOpacity(); 
 }); 
})

最終效果：

注意：

特別注意的一條：強(qiáng)制刷新，會(huì)導(dǎo)致頁(yè)面的重新加載，所以動(dòng)態(tài)加入的css樣式不會(huì)存在，那么對(duì)透明背景的初始化非常重要，在網(wǎng)頁(yè)端用戶強(qiáng)制刷新，才不會(huì)失去透明效果。

1、

((($body.scrollTop() / 150) > 0.9) ? 0.9 : ($body.scrollTop() / 150))

此三目表達(dá)式是判斷當(dāng)前滾動(dòng)條位置所在位置，如果位置值除以150大于0.9，就返回0.9，反之就返回那個(gè)小于等于0.9的值，將返回的值設(shè)置為背景的透明度就完成了。

2、由于滾動(dòng)條的位置是動(dòng)態(tài)獲取的，所以設(shè)置透明度會(huì)不停改變，不用單獨(dú)再做漸變的動(dòng)畫效果。

3、最終透明度問(wèn)題，京東在最終背景設(shè)置的是0.9，所以本案例也采用的0.9，同時(shí)體驗(yàn)效果會(huì)更好。

4、滾動(dòng)條位置導(dǎo)致的漸變，將150設(shè)置更大，漸變的距離會(huì)更長(zhǎng)。

以上所述是小編給大家介紹的基于JS實(shí)現(xiàn)仿京東搜索欄隨滑動(dòng)透明度漸變效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: