我正在使用html5应用程序,其中有固定的标头和固定的页脚。

当我单击页脚时,它应该向上滑动,直到距页眉10像素为止。

标头也应该发生同样的事情。

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>


默认布局的CSS很简单:我只在顶部和底部使用绝对定位。

.header, .footer {
    min-height:25px;
    background:grey;
    position:absolute;
    left:0;
    z-index:5;
    /** transition **/
    transition: all 1s;
}

.header {
    top:0;
    background:red;
}

.footer {
    bottom:0;
    background:yellow;
}
.header.max {
    bottom:35px;
}
.footer.max {
    top:35px;
}


不,它涉及动画部分。我不想使用Javascript动画!仅CSS!
如果单击页眉或页脚,则只需将max类添加到元素中:

$(".header, .footer, .content").on("click", function () {
  $(".max").removeClass("max");
  $(this).addClass("max");
});


动画应看起来像页脚从底部扩展。

我创建了一个JS-Fiddle。您会看到问题出在页脚/页眉的顶部和底部。

有谁知道如何解决这个问题,以便动画看起来像页脚从底部扩展?

谢谢!

最佳答案

需要将过渡元素设置为高度,以使动画效果更流畅。在我的示例中,我将页眉和页脚动画设置为300px,您需要使用JS进行更改,以通过window.height()或类似方法更新class =“ max”。

解决10px要求的一种方法是onload get window.height()减去10px,然后用最终结果更新class =“ max”。

我在您的CSS中所做的更改:

.header, .footer {
    min-height:25px;
    background:grey;
    position:absolute;
    left:0;
    z-index:5;
    /** transition **/
    transition:height 2s;
    -webkit-transition:height 2s; /* Safari */
}

.header.max {
   height:300px;
}
.footer.max {
   height:300px;
}


小提琴

http://jsfiddle.net/JSED5/3/

关于javascript - CSS3过渡:将固定的页脚或固定的页眉扩展到最大大小,而无需覆盖页眉或页脚,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19979820/

10-12 12:55
查看更多