基于JS實(shí)現(xiàn)仿京東搜索欄隨滑動(dòng)透明度漸變效果
廢話不多說(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)站的支持!
相關(guān)文章
JavaScript實(shí)現(xiàn)精美個(gè)性導(dǎo)航欄筋斗云效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)精美個(gè)性導(dǎo)航欄筋斗云效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-10-10JS實(shí)現(xiàn)生成會(huì)變大變小的圓環(huán)實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)生成會(huì)變大變小的圓環(huán),涉及javascript數(shù)學(xué)運(yùn)算及頁(yè)面樣式動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08javascript:文字不間斷向左移動(dòng)的實(shí)例代碼
這篇文章介紹了javascript:文字不間斷向左移動(dòng)的實(shí)例代碼,有需要的朋友可以參考一下2013-08-08javascript基礎(chǔ)進(jìn)階_深入剖析執(zhí)行環(huán)境及作用域鏈
下面小編就為大家?guī)?lái)一篇javascript基礎(chǔ)進(jìn)階_深入剖析執(zhí)行環(huán)境及作用域鏈。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09ES6 Symbol在對(duì)象中的作用實(shí)例分析
這篇文章主要介紹了ES6 Symbol在對(duì)象中的作用,結(jié)合實(shí)例形式分析了ES6 Symbol在對(duì)象中聲明、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-06-06Bootstrap每天必學(xué)之附加導(dǎo)航(Affix)插件
Bootstrap每天必學(xué)之附加導(dǎo)航(Affix)插件,附加導(dǎo)航即粘貼在屏幕某處實(shí)現(xiàn)錨點(diǎn)功能,感興趣的小伙伴們可以參考一下2016-04-04