Jquery animate with window scroll -

I'm trying to make javascript effects like a garage door on a single device. Actually I used to have a div at the back and was in front of the second division which would have been reduced on the window's scroll down to the base of the top.

I have JSFiddle which I want, but I have to div div myself, I want to be dynamic based on the scrolls of the size window.

JSFiddle here: and code:

  HTML & lt; Div id = "container" & gt; & Lt; Div id = "content" & gt; 1. It's going to be a very big line 2. It's going to be a very big line 3. It's going to be a very big line 4. It's going to be a very big line 5. It's going to be a very big line 6. It's going to be a very big line 7. It's going to be a very big line 8. It's going to be a very big line & lt; / Div & gt; & Lt; / Div & gt; & Lt; Button id = "top" & gt; Up & lt; / Div & gt; & Lt; Button ID = "Down" & gt; Down & lt; / Div & gt; CSS body {height: 1500px; } # Container {margin: 0 auto; Width: 400px; Height: 300px; Background color: red; Status: Relative; Limit: 1px # 000 solid; } #contents {width: 400px; Height: 300px; Status: Completed; Background color: white; Hidden flurry; } $ {Document} .ready (function () {$ ("# above"). Click (function () {$ ("# content"). Animate ({height: "0px"}, 500); }); $ ("(# Down") (function () {$ ("# content"). Animate ({height: "300px"}, 500);});});   
 Thank you very much   
 
 
 If you  < / P>   Status: fixed; # On the container   
 This scroll bar keeps running, while still sitting, in your document ready work, make sure there are many rooms for scrolling:  
  var minHeight = $ ("# container"). Height () * 4; If ($ ("body") height () & lt; minHeight $ ("body") height (minHeight);   
 And in the scroll function, use the scrolled percentage:  
  $ (window) .scroll (function () {var newSize = $ ( "# Container") Height () * (1 - $ (window) .scrollTop () / ($ (document) .ite () - $ (window) .it ()); $ ("#content") .css ('Height', new size);})           
 HTML>