滚动时标题变小

Question

我想在向下滚动400px页面后让标题变小。这是我的代码：

<script type="text/javascript">
    $(window).scroll(function () {
        var top = $(window).scrollTop();
        console.log(top);
        /*put your color in background color */
        if (top > 400) {
            $('#header').css('background', 'rgba(255,255,255,0.8)');
            $('#header').css('height', '70px');
            $('#logo').css('height', '60px');
            $('#logo').css('width', '100px');
            $('#logo img').css('height', '60px');
            $('#logo img').css('width', '100px');
            $('#nav').css('height', '40px');
            $('#nav a').css('color', '#888');
            $('#nav a').css('font-size', '14px');
            $('#nav').css('position', 'relative');
            $('#nav').css('left', '40%');
        } else {
            $('#header').css('background-color', 'Transparent');
            $('#header').css('height', '130px');
            $('#logo').css('height', '100px');
            $('#logo').css('width', '200px');
            $('#logo img').css('height', '100px');
            $('#logo img').css('width', '200px');
            $('#nav').css('height', '70px');
            $('#nav a').css('color', '#000000');
            $('#nav a').css('font-size', '20px');
            $('#nav').css('position', 'relative');
            $('#nav').css('top', '-50px');
            $('#nav').css('left', '0');
        }
    });
</script>

它不起作用。我的徽标，标题大小和菜单也需要用标题变小。