Twitter bootstrap navbar shadow na przewijanie

Question

Chciałbym wykonać następujące http://codepen.io/anon/pen/eIfdn dla paska nawigacyjnego bootstrap na Twitterze. Po prostu dodaje cień do paska nawigacyjnego po przewinięciu. Każda rada byłaby pomocna dzięki.

.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 I zmienił i dodałem js z góry.

Oto JS użyłem

$(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

Oto somenthing możesz zacząć:
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 */ 
} 

Ważne jest to, że używam zachowania w postaci afika w celu zablokowania paska nawigacyjnego w miejscu docelowym, a ja stosuję cień w nowym div tuż poniżej paska nawigacyjnego. Myślę, że łatwiej będzie sobie z tym poradzić, próbując dodać cień bezpośrednio do samego navbara.

Powodzenia!