fixed floating div scrolling

Question

<div class="top-head>some content</div>
<div class="b_head">this div will stay at top as user scrolls</div>

.b_head {
height: auto;
 z-index: 12;
position: relative;
display: block;}

<script type='text/javascript'>
$(document).load(function() {
 $window = $(window),
 $sidebar = $(".b_head "),
 sidebarTop = $sidebar.position().top,
 $sidebar.addClass('fixed');

 $window.scroll(function(event) {
  scrollTop = $window.scrollTop(),
  topPosition = Math.max(0, sidebarTop - scrollTop),
  $sidebar.css('top', topPosition);
 });
 });
  </script>

above is my code trying to get the .b_head div to float at top when user scrolls the page (similiar to 9gag.com floating header), but it is not working, can anyone help me out.

if i change the "position: fixed;" for b_head, then there will be empty space between it and the top of the page, since there is another div above it.

Answer 1

.b_head {
    height: auto;
    position: fixed;
    z-index:15;
}

Answer 2

you need to have it position:fixed; top:0;left:0;