javascript - Twitter bootstrap navbar shadow on scroll -

javascript - Twitter bootstrap navbar shadow on scroll -

i'm next http://codepen.io/anon/pen/eifdn twitter bootstrap navbar. adds shadow navbar upon scrolling. advice helpful give thanks you.

.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 css changed , added in js above.

here's js 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}); } }); })

here somenthing 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 of import bits i'm using affix behaviour lock navbar inplace, , i'm applying shadow new div below navbar. think easier manage trying add together shadow straight navbar itself.

good luck!

javascript html css twitter-bootstrap