css resize element on scroll

gistfile1.txt

#header {
  width: 100%;
  height: 287px;
  background-color: #673ab7;
  position: absolute;
  z-index: 1;
}

#content {
  position: relative;
  top: 287px;
  height: 1000px;
  background: yellow;
}


<div id="header">
  My center div...
</div>

<div id="content">
  test
</div>


$(function(){
    var
    Node = $('#header'),
    BaseHeight = Node.height();

    // To initially run the function:
    $(window).resize();

    var $scrollingDiv = Node;
    $(window).scroll(function() {
        var winScrollTop = $(window).scrollTop() + 0,
        newSize = BaseHeight - winScrollTop;

        Node.css({
            height: newSize,
            "min-height": "70px",
            "marginTop": winScrollTop + "px"
        });
    });
});