还是先看效果图：
- 顶部高斯模糊导航条
- 页面主体
在线demo:https://lucienyang.github.io/blur_nav/
第一步，将页面主体内容clone到navbar中，然后使用css3 -webkit-filter滤镜对内容做高斯模糊
第二部，监听页面滚动事件，计算出scrollTop，将navbar中的内容做同步滚动，同步滚动使用的方法是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(); // 当前窗口的滚动距离
translation = 'translateY(' + (-top + 'px') + ')';
$(duplicate).css({"-webkit-transform":translation,"-moz-transform":translation,"transform":translation});
});鼠标mouseover时候，对img标签加上 -webkit-filter滤镜样式，mouseleave时候再移除掉