javascript - Change a div width on window scroll -

I'm trying to create a javascript effect like a garage door on a divan.
Actually I have a full div at one bench and a second diva on the front which will sit on the top of the window from top to bottom on the window school.

I've got a similar JSfield, but it's doing it on the width rather than the height. I want to keep the div head up to the lower level and shrink from bottom to bottom.

  HTML & lt; Div id = "added" & gt; & Lt; Div id = "container" & gt; My center div ... & lt; / Div & gt; & Lt; / Div & gt; CSS #added {background: #eee; Height: 2000px; Hidden flurry; } # Container {width: 800px; Height: 2000px; Background color: # 567; Margin: 0 auto; Status: Relative; JS $ (window) Resize (function () {$ ('# container'). CSS ({top: ($ (window) .height () - $ ('# container'). OuterHeight ()) / 2});}); // To run the function initially: $ (window) .resize (); $ $ ScrollingDiv = $ ("# container"); $ (Window) .scroll (function () {var winScrollTop = $ (window) .scrollTop () + 0, zero height = $ (document) .it () - $ (window) .it (), newSize = 800 * (1 - (winScrollTop / zeroSizeHeight); $ scrollingDiv.css ({width: newSize, "margintop": winScrollTop + "px"}, 500, 'easeInOutSine');});   
 Any help would be appreciated.  
 Thanks   
 
 
 You can try that:  
  var $ scrollingDiv = $ ("# container"), defaultHeight = parseInt ($ scrollingDiv.css ('height')); // css as $ (window) as whatever .scroll (function () {var winScrollTop = $ (window) .scrollTop () + 0, zero syshenah = $ (document) .it () - $ (Window). High (), NewSize = defaultHyight * (1 - (winScrollTop / zeroSizeHeight)); $ scrollingDiv.css ({height: newSize, "marginTop": winScrollTop + "px"}, 500, 'easeInOutSine'); });