今天给大家分享一款基于jquery固定于顶部的导航，这款导航当浏览器滚动条位于顶部时，导航高度较高，当浏览器滚动向下滚动时，导航高度自动减低，并位于顶部。效果图如下：
实现的代码：
html代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<div id="page"><div id="toolbar" data-0="height:192px" data-128="height: 64px"><div id="actions"><div class="icon"><svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g id="menu"><path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"></path></g></svg></div><div class="spacer"></div><div class="icon"><svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g id="search"><path d="M15.5,14h-0.8l-0.3-0.3c1-1.1,1.6-2.6,1.6-4.2C16,5.9,13.1,3,9.5,3C5.9,3,3,5.9,3,9.5S5.9,16,9.5,16c1.6,0,3.1-0.6,4.2-1.6l0.3,0.3v0.8l5,5l1.5-1.5L15.5,14z M9.5,14C7,14,5,12,5,9.5S7,5,9.5,5C12,5,14,7,14,9.5S12,14,9.5,14z"></path></g></svg></div><div class="icon"><svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g id="more-vert"><path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,10,12,10z M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,16,12,16z"></path></g></svg></div></div><div id="title" data-0="font-size: 48px; padding: 0 0 24px 12px;" data-128="font-size: 18px; padding: 0 0 21px 60px;">Page Title</div></div><div id="content" data-0="padding-top: 192px;" data-192="padding-top: 190px;"><div class="card">Content goes here!</div><div class="card">Content goes here!</div><div class="card">Content goes here!</div><div class="card">Content goes here!</div><div class="card">Content goes here!</div><div class="card">Content goes here!</div><div class="card">Content goes here!</div></div></div><script src='jquery.js'></script><script src='skrollr.min.js'></script><script> $(document).ready(function () {skrollr.init({ smoothScrolling: true });}); //@ sourceURL=pen.js</script> |
css代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
html, body {background: #fafafa;color: #1BBBFB;font-family: sans-serif;}#page {position: absolute;top: 0;right: 0;bottom: 0;left: 0;}#toolbar {display: block;position: fixed;width: 100%;z-index: 10;box-sizing: border-box;-moz-box-sizing: border-box;background-color: #1BBBFB;padding: 0 16px;}#actions {position: relative;display: flex;align-items: center;flex-direction: row;height: 64px;top: 0;left: 0;right 0;}#actions .icon {padding: 7px;margin: 2px;vertical-align: middle;}#actions .spacer {flex: 1;}#actions svg {display: inline-block;pointer-events: none;position: relative;vertical-align: middle;width: 24px;height: 24px;fill: #fff;}#title {padding: 21px;position: absolute;bottom: 0;color: #fff;}#content {display: block;position: relative;padding: 24px;}.card {display: block;position: relative;width: 60%;height: 100px;border: 1px solid #1BBBFB;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;background-color: #fff;margin: 16px auto;padding: 24px;} |
