This repository has been archived by the owner on Jul 21, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (60 loc) · 10.2 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
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>ScrollBubble</title>
<style type='text/css'>
body {
margin: 20px;
}
.scubble {
position: fixed;
right: 0;
height: 20px;
background: red;
}
.content {
background: #ddd;
}
.header, .footer {
height: 400px;
background: #ccc;
}
</style>
</head>
<body>
<div class='scubble'></div>
<div class='header'></div>
<div class='content'>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ullamcorper odio quis lorem fermentum, a volutpat massa lobortis. Sed in hendrerit tortor. Sed id nisi nulla. Vestibulum eu tortor ut erat placerat porttitor vitae quis leo. Praesent commodo suscipit mattis. Vivamus eget porttitor metus. Aenean in dolor pulvinar, consectetur diam ac, placerat urna. Cras convallis ligula a accumsan laoreet. Phasellus ac mauris velit. Maecenas elementum sagittis sodales.</p>
</div>
<div class='footer'></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="./scubble.jquery.js"></script>
<script>
$('.scubble').scubble({
content: '.content'
});
</script>
</body>
</html>