Jquery 固定引导导航栏下的模糊效果

我试图在内容经过我的固定导航栏时模糊它，但我无法模糊任何东西…以下是我的最新尝试：

我假设我需要两层，一层用于文本，另一层用于混合下面的内容。这就是我的css的外观：

.navbar {
  z-index: 999;
  opacity: .94;
}

.navbar-fixed-top-glass-layer {
  top:0;
  position:fixed;
  z-index: 998;
  width:100%;
  height:50px;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

我已经发布了一个我试图通过引导实现的预期效果的列表

---

有什么想法吗？

我不能对你们当前的讨论发表评论，因为我的声誉太差了。Fahad的答案是正确的，只需在模糊的标题上为想要的内容添加一个具有更高z索引的固定位置div

jsFiddle

HTML

<ul id="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>          
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

---

我不能对你们当前的讨论发表评论，因为我的声誉。Fahad的答案是正确的，只需在模糊的标题上为想要的内容添加一个具有更高z索引的固定位置div

jsFiddle

HTML

<ul id="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>          
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

---

对于你想要达到的效果类型，这里提供了一个很好的解决方案：@Fahad Hasan你的链接也会模糊导航栏中的文本，这是我不想做的。请看我在第二把小提琴上贴出的效果。请检查这个。这反映了与您的第二个提琴相同的行为。@Fahad Hasan您的示例在我添加标题时会模糊标题上的文本。模糊过滤器仅模糊该元素的子元素。对于您试图实现的效果类型，这里提供了一个很好的解决方案：@Fahad Hasan your link还会模糊导航栏中的文本，这是我不想做的事。请看我在第二把小提琴上贴出的效果。请检查这个。这反映了与你的副手相同的行为。@Fahad Hasan你的例子在我添加标题时会模糊标题上的文本。模糊过滤器只模糊该元素的子元素本可以让它更漂亮，但我很兴奋：我认为OP使用的是推特引导，所以这个解决方案可能不起作用。本可以让它更漂亮，但我很兴奋：我认为OP使用的是Twitter引导，所以这个解决方案可能不起作用。