Question

我正在处理的页面上的页脚（或其中的一部分）是可折叠的。我也为这个元素的崩溃和扩展制作动画。页脚没有固定（也不是我想要的）但我希望在页脚展开时视图粘到页面底部。我试过用一些方法处理这个问题，但在所有情况下，行为都是一样的。折叠页脚时，文档高度在动画期间变小，页脚仍然固定在屏幕底部。展开页脚时，视口的位置不会改变，文档高度会增加，页脚的动画也会在页面下方发生。

我使用javascript和CSS3处理了这个动画。行为是一样的。我也尝试过绝对定位页脚并同时调整页脚上方内容高度的动画......同样的行为。

最后，我尝试了一些javascript hacks来动画window.scrollTo，同时正在进行其他动画。这不起作用令人困惑。这是该黑客攻击的基本示例。

collapse: function(container,collapsed) {
    var maxHeight = 250,
        steps = 50,
        params = this.animParams(maxHeight,steps,collapsed);

    for (i = 0; i < params.length; i++) {
        this.animateCollapse(container,params,i);
    }
},

animateCollapse: function(container,params,i) {
    setTimeout(function() {
        container.css('height',params[i]);
        window.scrollTo(0,100000);
    },10);
},

animParams: function(maxHeight, steps, collapsed) {
    var arr = [];

    for (i = 0; i <= steps; i++) {
        var multiplier = (steps - i) / steps;

        arr.push(maxHeight * multiplier);
    }

    if (!collapsed) {
        arr = arr.reverse();
    }

    return arr;
},

在上面的例子中，我使用的是一个比文档更高的值（100000），因为在该循环中，$（document）.height（）返回的值即使动画正在发生也不会改变同时。

所以，最后，我的目标非常简单 - 当页脚高度为动画并增加文档高度时，将视口保持在屏幕底部。有什么想法吗？

由于

当文档高度改变/动画时，保持文档滚动到底部

0 个答案: