导航栏缩小，滚动内容更改

Question

How can I achieve a scrolling effect where the navbar shrinks and an image transitions to words on scroll, as seen on: http://www.sarahlichang.com/ ?

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

Answer 1

To make it look that way you'll need to use some kind of animation, a css transition does the trick.

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

JSFiddle