Header i box shadow

Programiranje
1

Pozdrav webmajstori,

Dal ko zna kako napraviti recimo imam na stranici fixiran bar i sad imam neki content i kad krenem skrolat prema dole da se na fixiranom baru pojavi box shadow cini mi se da tu opciju ima gmail

2

1.) Na (.scroll) pokazuje sjenu
2.) Na (.mouseleave) vrača na početno

Ako želiš da sjena ostane onda samo izbaci mouseleave funkciju.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
	x=0;
	$(document).ready(function(){
	$('section').scroll(function(){
		$('section').css('box-shadow', '5px 5px 5px #888');
		$('section').mouseleave(function() {
		$("section").css('box-shadow', 'none');
		});
	  });
	});
</script>
	<style>
		section {height:100px; width:500px; overflow:scroll}
	</style>
</head>
<body>
<section>
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
</section>
</body>
</html>