Twitter bootstrap scrolling shadow navigation

Question

I want to do the following http://codepen.io/anon/pen/eIfdn for bootstrap Twitter navigator. It just adds a shadow to the navigation bar when scrolling. Any advice would be helpful.

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

I changed css and I added in js from above.

Here js i used

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

Here's what you need to get you started:
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 */ } 

The important bits are that I use the affix behavior to block the navbar inplace, and I apply the shadow to the new div just below the navigation bar. I think it will be easier to control what is trying to add a shadow directly to the navigation bar.

Good luck