滚动文档时窗口中对象高度和位置的变化

Question

如何处理jquery和/或CSS？

我有一个固定的对象，假设在原始顶部：'0‘(从文档顶部)和原始高度：’10 0‘’。我希望在向下滚动文档时，对象将其顶部位置更改为向下，并且它会增长其高度。因此，当我们到达文档的底部时，对象停在窗口的底部(和文档的底部)，并以100 we的高度结束。反过来，当我们向上滚动到文档顶部时，它以‘top : 0’和'height :10 it‘结束。

Answer 1

这个小提琴能做你想做的事：http://jsfiddle.net/Y2D4U/10/

这段代码就在“小提琴”中--我把它留在控制台命令中，这样您就可以在滚动时观察进度：

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);
});