Question

如何处理jquery和/或CSS？：

我有一个固定的对象，让我们说在原始顶部：'0'（从文档顶部）和原始高度：'10px'。我希望当向下滚动文档时，对象将其顶部位置更改为向下并且增加其高度。因此，当我们到达文档的底部时，对象将停在窗口的底部（和文档的底部），并以100px的高度结束。然后，当我们向上滚动到文档顶部时，它会在'top：0'和'height：10px'处完成。

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

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

1 个答案: