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

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