forked from wookimiii/stickify
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
86 lines (77 loc) · 8.49 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
<!DOCTYPE html>
<html>
<head>
<title>Scrollie</title>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type='text/javascript' src="javascripts/jquery.stickify.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/stickify.css" />
<script>
$().ready(function(){
$(".scrollie").stickify();
console.log('the system is down')
});
</script>
</head>
<body>
<style>
#title_bar{
background-color: #CCC;
border: solid black 1px;
}
.scrollie{
color: red;
background-color: #FFF;
padding: 10px;
}
h1{
margin:0;
}
#content{
width: 800px;
margin: 0 auto;
}
</style>
<div id="title_bar">
<h3>This is a title bar</h3>
</div>
<div id='content'>
<div class='filler'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nulla mi, tincidunt a imperdiet rutrum, congue ac erat. Cras iaculis, quam non auctor ultricies, nisi neque congue metus, quis pellentesque magna ipsum in tortor. Vivamus ante justo, consectetur dictum posuere eu, gravida eu neque. Curabitur accumsan imperdiet mi non sollicitudin. Proin iaculis sem libero, et fringilla nulla. Duis arcu nunc, commodo ut adipiscing vitae, feugiat et metus. Donec eros arcu, facilisis et laoreet eu, porta sed ante. Nulla facilisi. Morbi nec metus eu lorem egestas ornare vitae luctus purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div class='scrollie'><h1>This is a bar that will scroll with the page<input type='submit'></input></h1></div>
<div class='filler'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nulla mi, tincidunt a imperdiet rutrum, congue ac erat. Cras iaculis, quam non auctor ultricies, nisi neque congue metus, quis pellentesque magna ipsum in tortor. Vivamus ante justo, consectetur dictum posuere eu, gravida eu neque. Curabitur accumsan imperdiet mi non sollicitudin. Proin iaculis sem libero, et fringilla nulla. Duis arcu nunc, commodo ut adipiscing vitae, feugiat et metus. Donec eros arcu, facilisis et laoreet eu, porta sed ante. Nulla facilisi. Morbi nec metus eu lorem egestas ornare vitae luctus purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Ut quam eros, bibendum sed accumsan id, commodo vitae orci. Fusce pharetra, eros ac rutrum dapibus, augue justo aliquet tellus, ac sollicitudin diam massa at lacus. Duis a porta felis. Aliquam sed malesuada metus. Sed imperdiet placerat urna non vehicula. Donec blandit pellentesque elit vulputate convallis. Nunc malesuada placerat libero in feugiat. Cras quam tellus, convallis sit amet molestie id, auctor ut felis. Nam neque libero, facilisis a iaculis sit amet, lobortis et dolor. Nullam cursus elit at arcu vulputate lobortis. Etiam nec tortor et risus tempus tincidunt sit amet a metus. Ut suscipit mattis nunc, at imperdiet est commodo sed. Fusce interdum eros ut mi placerat eu condimentum nulla eleifend. Nam ante erat, pellentesque sit amet ultricies quis, dignissim scelerisque enim. Sed non nunc justo. Cras tempus tincidunt mauris, et fermentum enim sodales at. Mauris eget mi non libero porta vehicula. Sed dignissim augue eu erat vestibulum mollis.
</p>
<p>
Mauris accumsan arcu quis metus tincidunt non egestas turpis tempor. Cras urna sapien, placerat nec ornare at, congue non elit. Curabitur vitae urna ut orci faucibus pharetra eget luctus enim. Sed aliquet mauris vitae arcu dapibus nec ullamcorper metus rutrum. Vestibulum mi ipsum, pellentesque a congue sit amet, tincidunt non nisl. Proin eros enim, mattis eu bibendum a, tristique id nunc. Donec et tortor tellus, nec dictum magna. Duis sagittis elementum sem, at fringilla dui semper vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet ultrices tortor. Sed velit orci, vehicula ac aliquet eu, venenatis quis sapien.
</p>
<p>
Nunc a lacus velit. Nullam dictum scelerisque magna sit amet placerat. Phasellus lacinia pulvinar elit sed fermentum. Pellentesque pulvinar condimentum arcu sed condimentum. Morbi accumsan risus ut nunc mollis accumsan. Duis nec est non nibh tristique hendrerit. Quisque ac elit ante. Fusce quis ullamcorper turpis. Vivamus non neque ut urna accumsan posuere. Praesent metus diam, aliquam sit amet rutrum non, scelerisque ultricies nulla. In mollis magna quis massa ullamcorper lacinia.
</p>
<p>
Curabitur bibendum sapien non ante vehicula fermentum. Pellentesque tincidunt velit in velit dapibus tincidunt. Suspendisse et nisi eros, ut faucibus velit. Pellentesque ut nunc dolor. Nunc feugiat pulvinar nulla, at ullamcorper augue bibendum sodales. Ut blandit tortor turpis. Maecenas metus risus, fringilla in porttitor sit amet, suscipit sit amet lorem. Duis non cursus velit. Vivamus et mi tortor, aliquam sodales lacus. Phasellus et nisi leo. Sed non diam mi, a placerat tell
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nulla mi, tincidunt a imperdiet rutrum, congue ac erat. Cras iaculis, quam non auctor ultricies, nisi neque congue metus, quis pellentesque magna ipsum in tortor. Vivamus ante justo, consectetur dictum posuere eu, gravida eu neque. Curabitur accumsan imperdiet mi non sollicitudin. Proin iaculis sem libero, et fringilla nulla. Duis arcu nunc, commodo ut adipiscing vitae, feugiat et metus. Donec eros arcu, facilisis et laoreet eu, porta sed ante. Nulla facilisi. Morbi nec metus eu lorem egestas ornare vitae luctus purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Ut quam eros, bibendum sed accumsan id, commodo vitae orci. Fusce pharetra, eros ac rutrum dapibus, augue justo aliquet tellus, ac sollicitudin diam massa at lacus. Duis a porta felis. Aliquam sed malesuada metus. Sed imperdiet placerat urna non vehicula. Donec blandit pellentesque elit vulputate convallis. Nunc malesuada placerat libero in feugiat. Cras quam tellus, convallis sit amet molestie id, auctor ut felis. Nam neque libero, facilisis a iaculis sit amet, lobortis et dolor. Nullam cursus elit at arcu vulputate lobortis. Etiam nec tortor et risus tempus tincidunt sit amet a metus. Ut suscipit mattis nunc, at imperdiet est commodo sed. Fusce interdum eros ut mi placerat eu condimentum nulla eleifend. Nam ante erat, pellentesque sit amet ultricies quis, dignissim scelerisque enim. Sed non nunc justo. Cras tempus tincidunt mauris, et fermentum enim sodales at. Mauris eget mi non libero porta vehicula. Sed dignissim augue eu erat vestibulum mollis.
</p>
<p>
Mauris accumsan arcu quis metus tincidunt non egestas turpis tempor. Cras urna sapien, placerat nec ornare at, congue non elit. Curabitur vitae urna ut orci faucibus pharetra eget luctus enim. Sed aliquet mauris vitae arcu dapibus nec ullamcorper metus rutrum. Vestibulum mi ipsum, pellentesque a congue sit amet, tincidunt non nisl. Proin eros enim, mattis eu bibendum a, tristique id nunc. Donec et tortor tellus, nec dictum magna. Duis sagittis elementum sem, at fringilla dui semper vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet ultrices tortor. Sed velit orci, vehicula ac aliquet eu, venenatis quis sapien.
</p>
<p>
Nunc a lacus velit. Nullam dictum scelerisque magna sit amet placerat. Phasellus lacinia pulvinar elit sed fermentum. Pellentesque pulvinar condimentum arcu sed condimentum. Morbi accumsan risus ut nunc mollis accumsan. Duis nec est non nibh tristique hendrerit. Quisque ac elit ante. Fusce quis ullamcorper turpis. Vivamus non neque ut urna accumsan posuere. Praesent metus diam, aliquam sit amet rutrum non, scelerisque ultricies nulla. In mollis magna quis massa ullamcorper lacinia.
</p>
<p>
Curabitur bibendum sapien non ante vehicula fermentum. Pellentesque tincidunt velit in velit dapibus tincidunt. Suspendisse et nisi eros, ut faucibus velit. Pellentesque ut nunc dolor. Nunc feugiat pulvinar nulla, at ullamcorper augue bibendum sodales. Ut blandit tortor turpis. Maecenas metus risus, fringilla in porttitor sit amet, suscipit sit amet lorem. Duis non cursus velit. Vivamus et mi tortor, aliquam sodales lacus. Phasellus et nisi leo. Sed non diam mi, a placerat tell
</p>
</div>
</div>
</body>
</html>