Disable scroll bar in header but not in content for a web page
===

I have a simple web page with header and content, it may look like

    <div id="wrap">
        <div id="header">
        </div>
        <div id="content">
        </div>
    </div>

By default, it have a scroll bar in the right, but I want to disable/freeze the scroll bar in header, but remain it in content, is it possible to do this by javascrip/jquery or css?

Thanks

BEFORE
![enter image description here][1]


AFTER
![enter image description here][2]


  [1]: http://i.stack.imgur.com/CKo5b.png
  [2]: http://i.stack.imgur.com/jMBzg.png