-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (90 loc) · 6.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery.stickybox</title>
<style type="text/css" media="screen">
/* required for plugin */
.fixed { position: fixed; top: 0; }
.bottom { position: absolute; top: auto; bottom: 0; }
/* gerenal layout styles */
#wrap { margin: auto; width: 800px; }
#content { position: relative; margin-top: 20px; }
#banner,
#footer { background: #999; height:100px; }
#main { display: inline; float: left; width: 500px; outline: 1px dotted grey; }
#sub { display: inline; float: right; margin-left: 25px; width: 275px; outline: 1px dotted grey; }
#stickybox { background: red; min-height: 250px; padding: 20px 0; /*margin: 30px 0;*/ width: 275px; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.stickybox.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$('#stickybox').stickybox({
context: function(elm){
return $('#content');
}
});
/* exmaple scripts */
$('#example1').click(function(){
$('#stickybox').height( $(window).height() + 100 );
});
$('#example2').click(function(){
$('#main p:gt(0)').hide();
$('#stickybox').height( $('#main').height() + 200 );
});
$('#example3').click(function(){
$('#footer').height(1000);
});
$('#example4').click(function(){
$('#main p:hidden').show();
$('#stickybox').height('auto');
$('#footer').height(100);
});
$('#example5').click(function(){
$('#stickybox').animate({
height: '+=100px'
});
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="banner">
<p>Banner here.</p>
</div>
<div id="content" class="clearfix">
<div id="main">
<h1>jquery.stickybox</h1>
<h2>Responsive to the height of the page and the elements involved</h2>
<ul>
<li><button id="example1">Make stickybox taller than page</button></li>
<li><button id="example2">Make stickybox taller main content area</button></li>
<li><button id="example3">Make footer massive</button></li>
<li><button id="example4">Normalize</button></li>
<li><button id="example5">Make stickybox taller</button></li>
<li><a href="multiple.html">View multiple instances example</a></li>
</ul>
<p>Suspendisse non justo quis nunc luctus pretium. Nullam feugiat neque non nulla rhoncus tincidunt. Praesent nec porta libero. Donec porta ultricies enim in tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac iaculis leo. Curabitur pellentesque orci eu odio malesuada in sagittis magna tristique. Praesent sodales purus nec nulla pulvinar volutpat. Vivamus id dapibus metus. Vestibulum est arcu, laoreet at gravida ut, ultricies in nisl. Vestibulum dignissim tempus diam, eget mollis velit sagittis non. Praesent malesuada turpis imperdiet orci ullamcorper dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Sed vulputate elit eget elit commodo adipiscing faucibus turpis porta.</p>
<p>Donec condimentum ipsum in eros condimentum eu congue sem consectetur. Ut ac ante massa. Nam velit neque, faucibus id mollis et, condimentum eget orci. Donec urna purus, accumsan non congue eget, convallis vel felis. Vestibulum scelerisque, ipsum eget laoreet semper, enim odio congue lorem, vitae faucibus risus nisi ut neque. Quisque non ligula a odio pretium laoreet. Praesent dapibus accumsan sapien sit amet venenatis. Phasellus tempor euismod ante, nec lacinia nulla euismod at. Praesent quis est eu dolor ullamcorper lobortis. Proin et malesuada dui.</p>
<p>Suspendisse non justo quis nunc luctus pretium. Nullam feugiat neque non nulla rhoncus tincidunt. Praesent nec porta libero. Donec porta ultricies enim in tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac iaculis leo. Curabitur pellentesque orci eu odio malesuada in sagittis magna tristique. Praesent sodales purus nec nulla pulvinar volutpat. Vivamus id dapibus metus. Vestibulum est arcu, laoreet at gravida ut, ultricies in nisl. Vestibulum dignissim tempus diam, eget mollis velit sagittis non. Praesent malesuada turpis imperdiet orci ullamcorper dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Sed vulputate elit eget elit commodo adipiscing faucibus turpis porta.</p>
<p>Donec condimentum ipsum in eros condimentum eu congue sem consectetur. Ut ac ante massa. Nam velit neque, faucibus id mollis et, condimentum eget orci. Donec urna purus, accumsan non congue eget, convallis vel felis. Vestibulum scelerisque, ipsum eget laoreet semper, enim odio congue lorem, vitae faucibus risus nisi ut neque. Quisque non ligula a odio pretium laoreet. Praesent dapibus accumsan sapien sit amet venenatis. Phasellus tempor euismod ante, nec lacinia nulla euismod at. Praesent quis est eu dolor ullamcorper lobortis. Proin et malesuada dui.</p>
<p>Suspendisse non justo quis nunc luctus pretium. Nullam feugiat neque non nulla rhoncus tincidunt. Praesent nec porta libero. Donec porta ultricies enim in tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac iaculis leo. Curabitur pellentesque orci eu odio malesuada in sagittis magna tristique. Praesent sodales purus nec nulla pulvinar volutpat. Vivamus id dapibus metus. Vestibulum est arcu, laoreet at gravida ut, ultricies in nisl. Vestibulum dignissim tempus diam, eget mollis velit sagittis non. Praesent malesuada turpis imperdiet orci ullamcorper dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Sed vulputate elit eget elit commodo adipiscing faucibus turpis porta.</p>
<p>Donec condimentum ipsum in eros condimentum eu congue sem consectetur. Ut ac ante massa. Nam velit neque, faucibus id mollis et, condimentum eget orci. Donec urna purus, accumsan non congue eget, convallis vel felis. Vestibulum scelerisque, ipsum eget laoreet semper, enim odio congue lorem, vitae faucibus risus nisi ut neque. Quisque non ligula a odio pretium laoreet. Praesent dapibus accumsan sapien sit amet venenatis. Phasellus tempor euismod ante, nec lacinia nulla euismod at. Praesent quis est eu dolor ullamcorper lobortis. Proin et malesuada dui.</p>
</div>
<div id="sub">
<div id="stickybox">
<p>This is our target element.</p>
</div>
</div>
</div>
<div id="footer">
<p>footer here</p>
</div>
</div>
</body>
</html>