滚动上的 Twitter 引导导航栏阴影答案

【问题标题】：Twitter bootstrap navbar shadow on scroll滚动上的 Twitter 引导导航栏阴影
【发布时间】：2013-02-11 20:47:51
【问题描述】：

我希望执行以下操作 http://codepen.io/anon/pen/eIfdn 对于 Twitter 引导导航栏。它只是在滚动时向导航栏添加阴影。任何建议都会有所帮助，谢谢。

.navbar {
*position: relative;
top: 0;
left: 0;
width: 100%;
height: 80px;
z-index: 999;
-webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
display: none;
*z-index: 2;
margin-bottom: 20px;
overflow: visible;
}

这就是我更改的 css 并从上面添加到 js 中。

这是我使用的 JS

$(document).ready(function(){
 $(window).scroll(function(){
  var y = $(window).scrollTop();
  if( y > 0 ){
  $("#navbar").css({'display':'block', 'opacity':y/20});
  } else {
  $("#navbar").css({'display':'block', 'opacity':y/20});
  }
 });
})

【问题讨论】：

你想知道如何做你有代码的事情吗？
嗯，每次我将以下内容添加到引导导航栏时它都会中断，我不确定我做错了什么。
“它坏了”是一个广泛的问题。你能告诉我们吗？
中断意味着它没有达到预期的效果。它只显示导航栏，不显示阴影效果。我在bootstrap的css文件中把导航条码改成了上面贴的那个。
你能告诉我们你的代码吗？

标签： javascript html css twitter-bootstrap

【解决方案1】：

这里有一些东西可以帮助您入门：
http://jsfiddle.net/panchroma/pyYfG/

HTML

<div class="navbar" data-spy="affix">
<div class="navbar-inner">
.... standard navbar stuff ...
</div>
</div>
<div id="top-shadow"></div>
.... page content ...

CSS

#top-shadow {
position: fixed;
top: 0;
left: 20px;
width: 100%;
height: 42px;
z-index: 999;
-webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
display: none;
}

.navbar.affix{ /* position fixed navbar */
top:0; 
width:100%;
}

/* UPDATE BELOW */
.navbar{    
z-index:1000; /* lift .navbar above #top-shadow */
}

重要的是我正在使用词缀行为来锁定导航栏，并且我正在将阴影应用于导航栏下方的新 div。我认为尝试直接向导航栏本身添加阴影会更容易管理。

祝你好运！

【讨论】：

谢谢我得到了效果，但现在没有一个链接可以点击，我不知道如何修复它。
立即查看我的更新答案。我向导航栏添加了 z-index 细节，以将其提升到顶阴影上方。