基于JS實現(xiàn)仿京東搜索欄隨滑動透明度漸變效果
更新時間：2017年07月10日 11:17:17 作者：Rattenking
這篇文章主要介紹了基于JS實現(xiàn)仿京東搜索欄隨滑動透明度漸變效果,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
廢話不多說，直接上代碼：
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)聽滾動條事件，改變透明度
$(window).scroll(function() {
setCoverOpacity();
});
})
最終效果：
注意：
特別注意的一條：強制刷新，會導(dǎo)致頁面的重新加載，所以動態(tài)加入的css樣式不會存在，那么對透明背景的初始化非常重要，在網(wǎng)頁端用戶強制刷新，才不會失去透明效果。
1、
((($body.scrollTop() / 150) > 0.9) ? 0.9 : ($body.scrollTop() / 150))
此三目表達式是判斷當(dāng)前滾動條位置所在位置，如果位置值除以150大于0.9，就返回0.9，反之就返回那個小于等于0.9的值，將返回的值設(shè)置為背景的透明度就完成了。
2、由于滾動條的位置是動態(tài)獲取的，所以設(shè)置透明度會不停改變，不用單獨再做漸變的動畫效果。
3、最終透明度問題，京東在最終背景設(shè)置的是0.9，所以本案例也采用的0.9，同時體驗效果會更好。
4、滾動條位置導(dǎo)致的漸變，將150設(shè)置更大，漸變的距離會更長。
以上所述是小編給大家介紹的基于JS實現(xiàn)仿京東搜索欄隨滑動透明度漸變效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了解決 window.onload 被覆蓋的問題方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
關(guān)閉瀏覽器時提示onbeforeunload事件
這篇文章主要介紹了關(guān)閉瀏覽器時提示onbeforeunload事件，有需要的朋友可以參考一下2013-12-12
javascript實現(xiàn)網(wǎng)頁端解壓并查看zip文件
昨天給大家分享了在網(wǎng)頁端使用zip.js插件實現(xiàn)在線壓縮文件的代碼，今天給大家分享一下javascript實現(xiàn)網(wǎng)頁端解壓并查看zip文件的方法，非常的實用，有需要的小伙伴可以參考下2015-12-12
專IE7瀏覽器，IE URL參數(shù)過長問題，引發(fā)HTTP Status 122報錯；this作用域問題，對應(yīng)的解決方法如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
Bootstrap 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，網(wǎng)格系統(tǒng)類似一個表格。接下來通過本文給大家介紹Bootstrap網(wǎng)格基礎(chǔ)，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
ionic開發(fā)移動端界面時，在輸入用戶名和密碼的時候，輸入法不要擋住我的輸入框，并且輸入框往上滾動的時候，頂部標(biāo)題不要上移，下面給大家分享實現(xiàn)代碼，一起看看吧2016-12-12
這篇文章主要介紹了webpack 最佳配置指北的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-01-01
js實現(xiàn)鼠標(biāo)點擊左上角滑動菜單效果代碼
這篇文章主要介紹了js實現(xiàn)鼠標(biāo)點擊左上角滑動菜單效果代碼,涉及JavaScript基于鼠標(biāo)事件動態(tài)變換頁面元素樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
Math對象中的方法很常用,來跟我一起看看吧,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Math對象相關(guān)知識全解的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
本篇文章主要介紹了JavaScript 跨域之POST實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05