jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション

1
<header id="top-head">
2
<div class="inner">
3
    <h1 class="logo">Fixed Navi</h1>
4
        <nav id="global-nav">
5
            <ul>
6
                <li><a href="#">HOME</a></li>
7
                <li><a href="#">PRODUCT</a></li>
8
                <li><a href="#">WORKS</a></li>
9
                <li><a href="#">COMPANY</a></li>
10
                <li><a href="#">CONTACT</a></li>
11
            </ul>
12
        </nav>
13
    </div>
14
</header>

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
2
<script>
3
(function($) {
4
    $(function() {
5
        var $header = $('#top-head');
6
        $(window).scroll(function() {
7
            if ($(window).scrollTop() > 50) {
8
                $header.addClass('fixed');
9
            } else {
10
                $header.removeClass('fixed');
11
            }
12
        });
13
    });
14
})(jQuery);
15
</script>

1
/* header *//* header */
2
#top-head {
3
    position: fixed;
4
    width: 100%;
5
    margin: 0 auto;
6
    padding: 30px 0 0;
7
    line-height: 1;
8
}
9
#top-head:after {
10
    content: "";
11
    display: block;
12
    height: 1px;
13
    background: #fff;
14
    width: 980px;
15
    margin: 30px auto 0;
16
}
17

18
#top-head a,
19
#top-head {
20
    color: #fff;
21
    text-decoration: none;
22
}
23

24
#top-head .inner {
25
    position: relative;
26

27
}
28
#top-head .logo {
29
    float: left;
30
    font-size: 32px;
31
}
32
#global-nav ul {
33
    list-style: none;
34
    position: absolute;
35
    right: 0;
36
    bottom: 0;
37
    font-size: 14px;
38
}
39
#global-nav ul li {
40
    float: left;
41
    position: relative;
42

43
}
44
#global-nav ul li a {
45
    padding: 0 30px;
46
}
47
/* transition */
48
#top-head,
49
#top-head:after,
50
#top-head .logo,
51
#global-nav ul li,
52
#global-nav ul li a {
53
    transition: all 0.3s ease;
54
    -webkit-transition: all 0.3s ease;
55
    -moz-transition: all 0.3s ease;
56
    -o-transition: all 0.3s ease;
57
}
58
/* Fixed */
59
#top-head.fixed {
60
    padding-top: 15px;
61
    background: rgba(255,255,255,.7);
62
}
63
#top-head.fixed .logo {
64
    font-size: 24px;
65
    color: #333;
66
}
67

68
#top-head.fixed:after {
69
    width: 100%;
70
    margin-top: 20px;
71
}
72
#top-head.fixed #global-nav ul li a {
73
    color: #333;
74
    padding: 0 20px;
75
}