Object height and position change on window when scrolling document

Question

How to do with jquery and/or CSS ? :

I have a fixed object which is let's say at original-top : '0' (from document top) and original-height : '10px'. I would like that when scrolling down the document, the object changes its top position to down and it grows its height. So when we arrive at the bottom of the document, the object stops at the bottom of the window (and bottom of the document) and finishes at 100px of height. And back way, when we scroll upto the document top, it finishes at 'top : 0' and 'height : 10px'.

Answer 1

This fiddle does what you want: http://jsfiddle.net/Y2D4U/10/

this code is in the fiddle - i've left in the console commands so you can watch progress as you scroll:

var initialTop = 300;
var initialHeight = 10;
var finalHeight = 500;
var heightOffset = $(window).height();
var windowHeight = $(window).height();// - heightOffset;
var documentHeight = $(document).height();
console.log('Window Height: ' + windowHeight);
console.log('Document Height: ' + documentHeight);

$('#box').height(initialHeight).css('top',initialTop);

$(window).scroll(function() {
    var scrollPercentage = $(window).scrollTop() / (documentHeight - windowHeight);
    console.log('SP: ' + scrollPercentage);
    var newHeight = scrollPercentage * (finalHeight);
    $('#box').height(newHeight);
    var newTop = scrollPercentage * (windowHeight - newHeight - initialTop);
    $('#box').css('top', newTop + initialTop);
});