Twitter bootstrap navbar Schatten auf scroll

Question

Ich möchte Folgendes tun http://codepen.io/anon/pen/eIfdn für die Twitter-Bootstrap-Navbar. Es fügt der Navigationsleiste beim Scrollen einfach einen Schatten hinzu. Jeder Rat wäre hilfreich, danke.

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

Das ist das css, das ich geändert habe, und ich habe die js von oben hinzugefügt.

Hier ist das JS, das ich verwendet habe

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

Hier ist etwas, das Ihnen den Einstieg erleichtert:
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 */
}

Die wichtigen Bits sind, dass ich das Affix-Verhalten verwende, um die Navigationsleiste an Ort und Stelle zu fixieren, und ich wende den Schatten auf ein neues Div direkt unterhalb der Navigationsleiste an. Ich denke, dies wird einfacher zu verwalten, dass der Versuch, einen Schatten direkt auf die navbar selbst hinzufügen.

Viel Glück!