還是先看效果圖：
靜態(tài)效果圖.png
GIF.gif
頁面布局：
- 頂部高斯模糊導(dǎo)航條
- 頁面主體
在線demo:https://lucienyang.github.io/blur_nav/
建議使用chrome瀏覽器，其他瀏覽器我沒測過
導(dǎo)航條動態(tài)高斯模糊實(shí)現(xiàn)原理
第一步，將頁面主體內(nèi)容clone到navbar中，然后使用css3 -webkit-filter濾鏡對內(nèi)容做高斯模糊
第二部，監(jiān)聽頁面滾動事件，計算出scrollTop，將navbar中的內(nèi)容做同步滾動，同步滾動使用的方法是transform下面的translateY樣式，對Y軸做同步偏移
代碼片段如下：
var duplicate = $(".mainContent").clone();
var contentBlurred = $("<div></div>");
$(contentBlurred).append(duplicate);
$(contentBlurred).addClass('content-blurred');
$("#header").append(contentBlurred);
var translation;
$(window).bind("scroll", function(){
var top = $(this).scrollTop(); // 當(dāng)前窗口的滾動距離
translation = 'translateY(' + (-top + 'px') + ')';
$(duplicate).css({"-webkit-transform":translation,"-moz-transform":translation,"transform":translation});
});
內(nèi)容圖片動態(tài)高斯模糊實(shí)現(xiàn)原理
鼠標(biāo)mouseover時候，對img標(biāo)簽加上 -webkit-filter濾鏡樣式，mouseleave時候再移除掉
有興趣的盆友，可以去我的github上下載源碼，喜歡的話給個star~https://github.com/LucienYang/blur_nav
