Banner shrink on scroll, text stays middle

Question

I am trying to get my banner to shrink on scroll. How can I get the text to start in the middle of the banner, and ends at the middle when shrinking? Right now the text fall down on scroll instead of going up.

Heres what I have so far:

$(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/

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

If you don't mind, you can do a little hack,

You can add display:table in .wrapper and display:table-cell in .text. Then you can give vertical-align:middle for .text. Using this method, you don't need to worry about position of .text. Any padding can be given directly in .wrapper.

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

ref: Using margin:auto to vertically-align a div

edited May 23 '17 at 11:51

Community

1
1

answered May 22 '15 at 17:39

Jos

2,015
1
17
22

you can try `text-align: center` on `.text`, make sure there is no left or right padding for .wrapper (else it will add an offset,) [if u dont mind, a vote up will help.. :)] – Jos May 22 '15 at 17:54
I don't have 15 reputations to vote up yet, but I'll be sure to vote up once I do. Thanks for the help! – James May 22 '15 at 18:10

score 0 · Answer 2 · answered May 22 '15 at 17:26

You can change the <p> margin in jquery like this:

    $(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);
    }
});

You can use method chaining too:

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

Banner shrink on scroll, text stays middle

2 Answers2