Twitter bootstrap navbar shadow на прокрутке

Question

Я хочу сделать следующее: http://codepen.io/anon/pen/eIfdn для Twitter-бутстрапа navbar. Он просто добавляет тень к навигационной панели при прокрутке. Любые советы были бы полезны.

.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; 
} 

Thats the 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}); 
    } 
}); 
}) 

Answer 1

Здесь 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 */ 
} 

Важные биты в том, что я использую поведение аффикса для блокировки navbar inplace, и я применяю тень к новому div чуть ниже навигационной панели. Я думаю, что будет легче управлять тем, что пытается добавить тень непосредственно к самой навигационной панели.

Удачи вам!