javascript - 横幅在滚动时缩小，文本保持在中间

Question

我想让我的横幅在滚动时缩小。如何让文字从横幅中间开始，收缩时在中间结束？现在文本在滚动时向下而不是向上滚动。

这是我目前所拥有的:

$(document).scroll(function(){
    if ($(this).scrollTop()>175){
        // animate fixed div to small size:
        $('.wrapper').stop().animate({ height: 57 , 'padding-top': 20},100);
    } else {
        //  animate fixed div to original size
        $('.wrapper').stop().animate({ height: 115, 'padding-top': 0},100);
    }
}); 

http://jsfiddle.net/bnsUB/255/

Answer 1

如果你不介意，你可以做一些小技巧，

您可以在.wrapper中添加display:table，在.text中添加display:table-cell。然后你可以给.text vertical-align:middle。使用此方法，您无需担心 .text 的位置。任何填充都可以直接在 .wrapper 中给出。

http://jsfiddle.net/josangel555/a0ww0dhg/

引用:Using margin:auto to vertically-align a div