滚动时横幅缩小，文字保持中间

Question

我试图让我的横幅缩小滚动。 如何让文字从横幅中间开始，到收缩时在中间结束？现在，文字落在滚动而不是上升。

到目前为止我所拥有的：

Fun

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

Answer 1

如果你不介意，你可以做一点点破解，

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

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

参考：Using margin:auto to vertically-align a div

Answer 2

您可以像这样更改jquery中的<p>页边距：

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

您也可以使用方法链：

        $('.wrapper').stop()
            .animate({ height: 300, 'padding-top': 0},100)
            .find('p')
            .css('margin-top', 130);