使用過iOS 7的朋友會看到上面有一種非常酷的頂部固定導航菜單效果-磨砂效果。頂部導航菜單是半透明的模糊效果，當往下滾動頁面的時候，頂部導航菜單遮住頁面的內容，因為它是半透明的，它下面的內容淡淡的顯示，形成一種非常酷的磨砂效果。

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

其實，還有另外的方法可以實現這種效果，這就是我們這批文章要介紹的內容。

制作一個模糊導航條

在這個demo中，這個模糊導航條是一個空的元素，它的位置設置為固定定位。真正的導航菜單位于它的上方，使用和模糊導航條相同的大小和坐標。下面的代碼使用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;

}

在頁面中的主要元素是一個元素。

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元素和元素以固定單位的方式固定在頁面的最上方，其余部分都是元素的范圍。

main {

margin: 0;

background: url(london_background.jpg);

background-size: cover;

padding: 2rem;

}

這個時候，頁面向下滾動的時候，導航菜單下面的內容是看不見的，我們下面要來制作磨砂效果。

磨砂效果

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

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

pagecopy = pageContent.cloneNode(true),

blurryContent = document.getElementById("blurrycontent");

blurryContent.appendChild(pagecopy);

通過上面的設置之后，現在的效果非常的勉強。現在#blurrycontent中的內容不會隨頁面一起往下滾動，我們需要將它和頁面滾動進行同步：

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

現在，滾動頁面就相當于移動了#blurrycontent內容，它們被同步起來了。因為元素被固定在#blurrycontent元素上面，所以它不會受到影響。

效果限制

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

下面對制作這個效果總結4個要注意的地方。

因為IE瀏覽器不支持CSS filters，所以在IE瀏覽器中不會有效果。頁面的內容還是會正常滾動，但是你不會看到任何磨砂效果。

在手機和平板上使用fixed屬性要非常注意：手機瀏覽器在position: fixed時可能會鎖定某個屏幕的區域。

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

在復制元素的時候要注意ID問題，被復制的元素不能使用ID，否則可能在后面的CSS和js中會發生異常不可測的錯誤。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。