MUI導航欄透明漸變 原生JS實現

body,p,h1

.module-layer
.module-layer-content
.module-layer-bg
.layer-head-name
.layer-return,.layer-share
.layer-return
.layer-share
.fixed-layer
.relative-layer
.layer-content
.layer-close
.pr#shop-input
::-webkit-input-placeholder
#shop-input
:-moz-placeholder
#shop-input
::-moz-placeholder
#shop-input
:-ms-input-placeholder
#shop-input
.search-box
.search-box
:after
#shop-input
.shop-search
.layer-return
.layer-share
a.module-content
.module-content
div:first-child
img.module-content
divimg

class="module-layer">
class="module-layer-content">
class="layer-return">
p>
class="layer-head-name">
class="pr search-box">
class="shop-search"
src="images/search.png"/>
id="shop-input"
type="text"
placeholder="搜尋店內商品"
}//獲取css樣式
function getstyle(element, attr)
else
}//獲取原始backgroundcolor值
var color = getstyle(document.getelementsbyclassname
('module-layer-content')
[0],'backgroundcolor')
; //取到rgb
var colorrgb = color.substring(0,color.lastindexof(',') +1)
; //取到a
var colora = color.substring(color.lastindexof
(',') +1,color.length -1)
; //對a判斷，如果最終值小於0.9，直接設定為1
if(colora
<0.9)
//設定背景色的a的函式
var setcoveropacity = function()
//初始化函式
setcoveropacity()
; //繫結滾動監聽事件
window.addeventlistener('scroll',setcoveropacity,false);}
())

不相容ie8及以下的ie瀏覽器；

550是滾動條到達位置的最終透明度，此處根據需要自定義；

css終背景顏色的rgba的a是最終透明度

我的部落格，歡迎交流！

我的csdn部落格，歡迎交流！

前端筆記專欄

前端筆記列表

遊戲列表

posted @

2017-11-07 11:28

newman·li 閱讀(

...)

編輯收藏

基於 vue2 導航欄透明漸變

做法為 1 首先給要滾動變化的導航新增 style style fixed title 個人中心 style style slot left class news box overflow visible class iconfont news icon class news num 4 slot ...

iOS開發技巧 設定導航欄全透明效果

為簡化操作，這裡我們使用 storyboard 簡單搭建介面，為檢視控制器新增導航欄，並為其新增兩個 item 屬性 具體實現這裡不再闡述 如下所示 執行工程，效果如下 接下來，在viewcontroller.swift檔案中新增如下 import uikit class viewcontrolle...

iOS中導航欄隱藏後，設定狀態列不透明效果

在開發中，當我們設定了導航欄隱藏之後，卻發現狀態列也跟著透明了，如果當前頁面是個可以滾動的tableview時，我們發現使用者體驗十分不好。就如下圖 那麼請看解決方法 為了體現出下文的bug，這裡我把狀態列設為紅色 成功是成功了，可是這裡設定的是全域性，因此其他頁面也出現這個狀況，那就不好了。怎麼解...