使用過iOS 7的朋友會(huì)看到上面有一種非常酷的頂部固定導(dǎo)航菜單效果-磨砂效果。頂部導(dǎo)航菜單是半透明的模糊效果，當(dāng)往下滾動(dòng)頁(yè)面的時(shí)候，頂部導(dǎo)航菜單遮住頁(yè)面的內(nèi)容，因?yàn)樗前胪该鞯?#xff0c;它下面的內(nèi)容淡淡的顯示，形成一種非常酷的磨砂效果。

我們使用CSS的blur濾鏡完全可以在頁(yè)面中實(shí)現(xiàn)這個(gè)效果。但是使用CSS濾鏡只能在元素本身內(nèi)容上產(chǎn)生效果，它不能影響到它下方的元素。也就是說，CSS的blur濾鏡不能對(duì)使用該濾鏡的元素下面的元素產(chǎn)生模糊效果。有一個(gè)新的屬性-webkit-backdrop-filter可以實(shí)現(xiàn)這個(gè)功能，但這是一個(gè)實(shí)驗(yàn)性的屬性，只在webkit內(nèi)核的瀏覽器中可以運(yùn)行。

其實(shí)，還有另外的方法可以實(shí)現(xiàn)這種效果，這就是我們這批文章要介紹的內(nèi)容。

制作一個(gè)模糊導(dǎo)航條

在這個(gè)demo中，這個(gè)模糊導(dǎo)航條是一個(gè)空的元素，它的位置設(shè)置為固定定位。真正的導(dǎo)航菜單位于它的上方，使用和模糊導(dǎo)航條相同的大小和坐標(biāo)。下面的代碼使用Sass來書寫，沒有添加瀏覽器廠商的前綴。

#blurrycontent {

padding: 1rem;

top: 0; left: 0;

width: 100%;

height: 5rem;

overflow: hidden;

position: fixed;

filter: blur(4px);

}

nav {

@extend #blurrycontent;

filter: none;

text-align: right;

}

在頁(yè)面中的主要元素是一個(gè)元素。

London

With roots at least 7,000 years old, London is an accretion of artifacts old and new, from the remnants of wooden Neolithic settlements buried in the mud of the Thames to gleaming 21st century spires of glass and steel…

#blurrycontent元素和元素以固定單位的方式固定在頁(yè)面的最上方，其余部分都是元素的范圍。

main {

margin: 0;

background: url(london_background.jpg);

background-size: cover;

padding: 2rem;

}

這個(gè)時(shí)候，頁(yè)面向下滾動(dòng)的時(shí)候，導(dǎo)航菜單下面的內(nèi)容是看不見的，我們下面要來制作磨砂效果。

磨砂效果

正如前面說的，filter只能在元素本身使用，不會(huì)影響到它下面的元素。所以我們要為元素制作一個(gè)副本，并使用cloneNode方法將它放入到#blurrycontent元素中。

var pageContent = document.getElementById("content"),

pagecopy = pageContent.cloneNode(true),

blurryContent = document.getElementById("blurrycontent");

blurryContent.appendChild(pagecopy);

通過上面的設(shè)置之后，現(xiàn)在的效果非常的勉強(qiáng)。現(xiàn)在#blurrycontent中的內(nèi)容不會(huì)隨頁(yè)面一起往下滾動(dòng)，我們需要將它和頁(yè)面滾動(dòng)進(jìn)行同步：

window.onscroll = function() { blurryContent.scrollTop = window.pageYOffset; }

現(xiàn)在，滾動(dòng)頁(yè)面就相當(dāng)于移動(dòng)了#blurrycontent內(nèi)容，它們被同步起來了。因?yàn)樵乇还潭ㄔ?blurrycontent元素上面，所以它不會(huì)受到影響。

效果限制

將頁(yè)面上的內(nèi)容復(fù)制為一個(gè)副本，并對(duì)它使用模糊濾鏡會(huì)對(duì)瀏覽器和GPU增加一些負(fù)擔(dān)，所以你要在復(fù)制元素之前想清楚它里面要放多少內(nèi)容。cloneNode是一個(gè)“實(shí)時(shí)”的復(fù)制方法：瀏覽器中任何對(duì)原始元素的改變都會(huì)反射到復(fù)制的元素上。

下面對(duì)制作這個(gè)效果總結(jié)4個(gè)要注意的地方。

因?yàn)镮E瀏覽器不支持CSS filters，所以在IE瀏覽器中不會(huì)有效果。頁(yè)面的內(nèi)容還是會(huì)正常滾動(dòng)，但是你不會(huì)看到任何磨砂效果。

在手機(jī)和平板上使用fixed屬性要非常注意：手機(jī)瀏覽器在position: fixed時(shí)可能會(huì)鎖定某個(gè)屏幕的區(qū)域。

如果用戶使用屏幕閱讀器來瀏覽這個(gè)頁(yè)面，它會(huì)閱讀兩次相同的內(nèi)容。解決這個(gè)問題可以像下面這樣:

在復(fù)制元素的時(shí)候要注意ID問題，被復(fù)制的元素不能使用ID，否則可能在后面的CSS和js中會(huì)發(fā)生異常不可測(cè)的錯(cuò)誤。

總結(jié)

以上是生活随笔為你收集整理的html5磨砂透明首页制作,如何制作磨砂效果的顶部固定导航菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。