导航栏缩小，滚动时内容发生变化

Question

如何实现滚动效果，其中导航栏缩小并且图像在滚动时过渡为文字，如上所见：http://www.sarahlichang.com/?

$(window).scroll(function() {
    if ($(document).scrollTop() > 150) {
        $('.navbar').addClass('shrink');
    }
    else {
        $('.navbar').removeClass('shrink');
    }
});

Answer 1

要使其看起来像那样，您需要使用某种动画，css 过渡就可以了。

-webkit-transition:all 0.2s ease;
transition: all 0.2s ease;

JSFiddle