forked from wsb260/jquery-headClone
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (62 loc) · 5.64 KB
/
index.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!doctype html>
<html class="js">
<head>
<meta charset="utf-8">
<title>Headhesive demo - Mark Goodyear</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/headhesive.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>
</head>
<body id="top">
<header class="banner">
<nav class="container">
<h1 class="logo">Headhesive.js</h1>
<ul class="nav">
<li class="nav__item"> @markgdyr </li>
</ul>
</nav>
</header>
<section class="hero">
<div class="container">
<h1 class="hero__title">Headhesive.js</h1>
<p class="hero__snippet">An on-demand sticky header.</p>
</div>
</section>
<a id="showHere"></a>
<main role="main">
<div class="container">
<h2>What is it?</h2>
<p class="lead">Headhesive.js creates an on-demand sticky header. Specify where you want your header to become fixed and the rest is magic.</p>
<h3>Scroll to see it in action</h3>
<p>Soft southern pansy ne'ermind breadcake eeh gi' o'er be reet. Th'art nesh thee. What's that when it's at ooam be reet where's tha bin. Soft lad nah then ne'ermind mardy bum ne'ermind. Sup wi' 'im tha what where's tha bin god's own county bobbar. Ah'll box thi ears eeh big girl's blouse ey up tha knows sup wi' 'im. That's champion ah'll learn thi face like a slapped arse ey up nah then shu' thi gob. Th'art nesh thee shu' thi gob dahn t'coil oil wacken thi sen up ee by gum eeh. Shurrup ah'll gi' thi summat to rooer abaht appens as maybe where there's muck there's brass mardy bum. What's that when it's at ooam a pint 'o mild where there's muck there's brass. Sup wi' 'im. Gerritetten. Tintintin nay lad. Tell thi summat for nowt t'foot o' our stairs gi' o'er.</p>
<img src="http://placekitten.com/800/400" alt="Here kitty kitty">
<p>Will 'e 'eckerslike tintintin ee by gum big girl's blouse nay lad shu' thi gob. Tha what big girl's blouse how much will 'e 'eckerslike nobbut a lad shurrup. Tintintin nah then. Tha daft apeth what's that when it's at ooam tintintin ah'll box thi ears. Th'art nesh thee. Tha what gerritetten nobbut a lad nah then. Face like a slapped arse ah'll gi' thee a thick ear mardy bum a pint 'o mild cack-handed. Gerritetten tell thi summat for nowt soft lad ey up any rooad will 'e 'eckerslike. Breadcake michael palin. Bobbar wacken thi sen up tha daft apeth th'art nesh thee. Shurrup ah'll learn thi. Where's tha bin any rooad. What's that when it's at ooam a pint 'o mild.</p>
<p>Where there's muck there's brass tha daft apeth be reet. Any rooad be reet big girl's blouse tintintin sup wi' 'im. Nay lad. By 'eck ne'ermind shu' thi gob bobbar. Ah'll learn thi ah'll gi' thee a thick ear. Th'art nesh thee. God's own county ah'll gi' thee a thick ear mardy bum ey up tha what tha daft apeth. Ah'll box thi ears soft southern pansy how much tha daft apeth. Appens as maybe t'foot o' our stairs nah then michael palin bobbar michael palin. That's champion nah then bloomin' 'eck t'foot o' our stairs.</p>
<p>Bobbar ah'll learn thi ey up. Breadcake. Soft lad big girl's blouse ey up th'art nesh thee ah'll learn thi. Nobbut a lad ah'll gi' thi summat to rooer abaht gi' o'er appens as maybe. Breadcake nay lad. Ah'll gi' thee a thick ear soft southern pansy what's that when it's at ooam ah'll gi' thee a thick ear tha daft apeth. Cack-handed nobbut a lad nay lad ah'll gi' thi summat to rooer abaht any rooad. Nah then will 'e 'eckerslike. Is that thine t'foot o' our stairs mardy bum tha daft apeth will 'e 'eckerslike is that thine. Chuffin' nora what's that when it's at ooam nah then what's that when it's at ooam. Tell thi summat for nowt ah'll gi' thi summat to rooer abaht mardy bum. Tell thi summat for nowt sup wi' 'im tintintin ah'll gi' thi summat to rooer abaht.</p>
<p>Bobbar shu' thi gob a pint 'o mild any rooad god's own county tha daft apeth. Tell thi summat for nowt where's tha bin chuffin' nora soft southern pansy where's tha bin. That's champion what's that when it's at ooam ah'll gi' thee a thick ear big girl's blouse tha daft apeth. Gerritetten a pint 'o mild wacken thi sen up. Tha daft apeth tha what. Gerritetten mardy bum nobbut a lad. Mardy bum. Will 'e 'eckerslike ah'll learn thi sup wi' 'im ey up where there's muck there's brass. Cack-handed face like a slapped arse what's that when it's at ooam. Bloomin' 'eck. Aye that's champion gerritetten. Big girl's blouse aye shu' thi gob sup wi' 'im tha daft apeth. Ah'll learn thi nah then god's own county nobbut a lad big girl's blouse. Will 'e 'eckerslike. Big girl's blouse tell thi summat for nowt shurrup tell thi summat for nowt tell thi summat for nowt appens as maybe.</p>
</div>
</main>
<footer>
<div class="container">
<p> <span class="top"><a href="#top">#top</a></span></p>
</div>
</footer>
<script type="text/javascript" src="dist/headhesive.js"></script>
<script>
// Set options
var options = {
offset: '#showHere',
classes: {
clone: 'banner--clone',
stick: 'banner--stick',
unstick: 'banner--unstick'
}
};
// Initialise with options
var banner = new Headhesive('.banner', options);
// Headhesive destroy
// banner.destroy();
</script>
</body>
</html>