0

我正在处理的页面上的页脚（或其中的一部分）是可折叠的。我还为这个元素的折叠和展开设置动画。页脚不是固定的（我也不希望它是固定的），但我希望在页脚扩展时视图保持在页面底部。我试过用几种方法来处理这个问题，但在所有情况下，行为都是一样的。折叠页脚时，动画期间文档高度变小，页脚保持锚定在屏幕底部。展开页脚时，视口的位置不会改变，文档高度会增加，并且页脚的动画发生在折叠下方。

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

最后，我尝试了一些 javascript hack 来为 window.scrollTo 设置动画，而其他动画正在发生。这不起作用令人困惑。这是该 hack 的一个基本示例。

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() 返回的值也不会改变。

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

谢谢

4

0 回答 0