滚动条上的Twitter bootstrap导航栏阴影

我正在为Twitter启动导航栏执行以下操作 http://codepen.io/anon/pen/eIfdn 。它只是在滚动时向导航栏添加阴影。任何建议将有助于谢谢你。滚动条上的Twitter bootstrap导航栏阴影

.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中添加。

下面是我用

$(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}); 
    } 
}); 
})

来源

2013-02-11 Morki

你是否想知道如何做一些你有代码的东西？ – 2013-02-11 01:36:24

那么每次我将以下内容添加到引导程序导航栏时，我都不知道我做错了什么。 – Morki 2013-02-11 01:57:00

“It break”是一个广泛的问题。你能告诉我们吗？ – 2013-02-11 01:57:43

这里的JS是somenthing让你开始：
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。我认为这会更容易管理，试图直接向导航栏本身添加阴影。

祝你好运！

来源

2013-02-11 02:51:19

谢谢我得到的效果，但现在没有任何链接是可点击的，我不知道如何解决它。 – Morki 2013-02-11 03:24:08

现在查看我更新的答案。我向导航栏添加了z-index细节，以将其提升到顶部阴影之上。 – 2013-02-11 12:48:56

滚动条上的Twitter bootstrap导航栏阴影

回答

相关问题