forked from lecar-red/jquery-stickyfloat
-
Notifications
You must be signed in to change notification settings - Fork 0
/
overflow.html
87 lines (66 loc) · 12.6 KB
/
overflow.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
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.stickyfloat.js"></script>
<style type="text/css">
div.scroll {
background-color: #eee;
width: 600px;
height: 200px;
overflow:scroll;
}
.header {
float: left;
height: 30px;
width: 600px;
background-color: black;
color: white;
font-family: 'Times New Roman', serif;
font-size: 20px;
}
.clear { both: clear; }
.inside { border: 1px dashed black; }
</style>
<script type="text/javascript">
$(function() { $('.header').stickyfloat({}) } );
</script>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>
<p>overflow:scroll</p>
<div class="scroll">
<div class="header" id="nowrapper">This is a header</div>
<br class="clear">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo, massa feugiat tincidunt tincidunt, ligula dolor blandit purus, at aliquet mauris purus eget dui. Fusce ornare odio vitae quam consequat vel adipiscing leo fringilla. Donec nibh elit, adipiscing non ultricies nec, interdum sit amet justo. Donec pulvinar arcu eget mauris imperdiet non elementum lorem sagittis. Aliquam risus elit, egestas vel tristique sit amet, vestibulum in metus. Aliquam cursus, tellus a suscipit pulvinar, justo ipsum bibendum leo, id rutrum libero turpis quis lorem. Aenean bibendum lectus eget orci aliquam eu consequat orci dictum. Praesent nec sapien felis, consequat eleifend nisl. Morbi ac turpis dui, a mollis lorem.
Sed in leo vitae felis consequat rutrum. Mauris dolor lacus, pharetra nec cursus eget, vehicula sed arcu. Integer non tellus ac orci placerat gravida sit amet ac lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat semper vehicula. Nam placerat, turpis sit amet lobortis vehicula, sapien libero cursus dui, dictum aliquet massa nisl vitae nisl. Nulla facilisi. Ut vel malesuada odio. Vestibulum metus massa, convallis tincidunt sollicitudin eu, ornare at nulla. Curabitur orci tellus, egestas ac vulputate vel, semper non dui. Sed nec eros quam. Suspendisse sed auctor lorem.
Suspendisse feugiat vehicula augue, sit amet aliquam purus volutpat eget. Sed sagittis lacinia mollis. Maecenas a leo nisl, in faucibus lectus. Pellentesque eget ipsum a justo convallis placerat in sit amet enim. Suspendisse tincidunt, tortor sed lacinia semper, magna justo molestie arcu, sed lacinia sem sem vel mi. Maecenas dictum, massa euismod dignissim tincidunt, eros ipsum pretium libero, nec dapibus sem augue et metus. Integer vel egestas est. Curabitur blandit quam at diam sollicitudin fringilla. Pellentesque vulputate egestas ante sit amet lobortis. Nunc aliquet imperdiet justo at mollis. Etiam ut tortor vel elit scelerisque congue aliquam sit amet metus. Aenean mauris lorem, eleifend non faucibus id, interdum sollicitudin sapien. Nam non mauris sed diam ullamcorper aliquam. Praesent euismod vehicula ultricies. Quisque dignissim ultricies mauris, convallis rutrum risus accumsan vel.
Ut velit sapien, placerat pellentesque dapibus vel, ultricies ac nibh. Praesent a diam et sapien condimentum imperdiet. Cras quis pulvinar purus. Vestibulum id nibh elit, et ullamcorper velit. Quisque interdum lacus nulla, eget faucibus leo. Morbi rutrum dictum turpis, vitae commodo massa facilisis ut. Vestibulum non mattis purus. Duis dapibus lobortis eros accumsan vulputate. Nunc nisl augue, lobortis id vulputate in, blandit id lorem. Cras a ligula odio, eu porttitor velit. Proin fringilla consequat libero vel porta. Nam lorem orci, hendrerit et cursus in, rhoncus tincidunt mauris. Nunc rhoncus pellentesque scelerisque. Fusce hendrerit hendrerit ligula. Quisque ut sem augue, nec tempor leo.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla quis mauris erat. Fusce quis faucibus nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam id risus enim. Nulla feugiat, erat ut egestas tempus, ante odio condimentum nulla, non cursus eros erat quis velit. In vestibulum rutrum orci a blandit. Mauris accumsan magna vitae quam vehicula nec condimentum nulla semper. Morbi tristique est sed nunc accumsan posuere. Fusce pulvinar diam eget sapien vulputate feugiat. Mauris nisl tellus, gravida non elementum non, iaculis sit amet ligula. Suspendisse eget est in arcu volutpat auctor. Curabitur posuere viverra elit, in tincidunt erat commodo nec. Nam scelerisque neque vitae sapien tristique tincidunt fringilla libero ornare.
</div>
<div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla quis mauris erat. Fusce quis faucibus nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam id risus enim. Nulla feugiat, erat ut egestas tempus, ante odio condimentum nulla, non cursus eros erat quis velit. In vestibulum rutrum orci a blandit. Mauris accumsan magna vitae quam vehicula nec condimentum nulla semper. Morbi tristique est sed nunc accumsan posuere. Fusce pulvinar diam eget sapien vulputate feugiat. Mauris nisl tellus, gravida non elementum non, iaculis sit amet ligula. Suspendisse eget est in arcu volutpat auctor. Curabitur posuere viverra elit, in tincidunt erat commodo nec. Nam scelerisque neque vitae sapien tristique tincidunt fringilla libero ornare.
</div>
<div style="overflow: auto">Hello World</div>
<div class="scroll">
<div class="inside">
<div class="header" id="upper">
Header to be sticky
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo, massa feugiat tincidunt tincidunt, ligula dolor blandit purus, at aliquet mauris purus eget dui. Fusce ornare odio vitae quam consequat vel adipiscing leo fringilla. Donec nibh elit, adipiscing non ultricies nec, interdum sit amet justo. Donec pulvinar arcu eget mauris imperdiet non elementum lorem sagittis. Aliquam risus elit, egestas vel tristique sit amet, vestibulum in metus. Aliquam cursus, tellus a suscipit pulvinar, justo ipsum bibendum leo, id rutrum libero turpis quis lorem. Aenean bibendum lectus eget orci aliquam eu consequat orci dictum. Praesent nec sapien felis, consequat eleifend nisl. Morbi ac turpis dui, a mollis lorem.
Sed in leo vitae felis consequat rutrum. Mauris dolor lacus, pharetra nec cursus eget, vehicula sed arcu. Integer non tellus ac orci placerat gravida sit amet ac lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat semper vehicula. Nam placerat, turpis sit amet lobortis vehicula, sapien libero cursus dui, dictum aliquet massa nisl vitae nisl. Nulla facilisi. Ut vel malesuada odio. Vestibulum metus massa, convallis tincidunt sollicitudin eu, ornare at nulla. Curabitur orci tellus, egestas ac vulputate vel, semper non dui. Sed nec eros quam. Suspendisse sed auctor lorem.
Suspendisse feugiat vehicula augue, sit amet aliquam purus volutpat eget. Sed sagittis lacinia mollis. Maecenas a leo nisl, in faucibus lectus. Pellentesque eget ipsum a justo convallis placerat in sit amet enim. Suspendisse tincidunt, tortor sed lacinia semper, magna justo molestie arcu, sed lacinia sem sem vel mi. Maecenas dictum, massa euismod dignissim tincidunt, eros ipsum pretium libero, nec dapibus sem augue et metus. Integer vel egestas est. Curabitur blandit quam at diam sollicitudin fringilla. Pellentesque vulputate egestas ante sit amet lobortis. Nunc aliquet imperdiet justo at mollis. Etiam ut tortor vel elit scelerisque congue aliquam sit amet metus. Aenean mauris lorem, eleifend non faucibus id, interdum sollicitudin sapien. Nam non mauris sed diam ullamcorper aliquam. Praesent euismod vehicula ultricies. Quisque dignissim ultricies mauris, convallis rutrum risus accumsan vel.
Ut velit sapien, placerat pellentesque dapibus vel, ultricies ac nibh. Praesent a diam et sapien condimentum imperdiet. Cras quis pulvinar purus. Vestibulum id nibh elit, et ullamcorper velit. Quisque interdum lacus nulla, eget faucibus leo. Morbi rutrum dictum turpis, vitae commodo massa facilisis ut. Vestibulum non mattis purus. Duis dapibus lobortis eros accumsan vulputate. Nunc nisl augue, lobortis id vulputate in, blandit id lorem. Cras a ligula odio, eu porttitor velit. Proin fringilla consequat libero vel porta. Nam lorem orci, hendrerit et cursus in, rhoncus tincidunt mauris. Nunc rhoncus pellentesque scelerisque. Fusce hendrerit hendrerit ligula. Quisque ut sem augue, nec tempor leo.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla quis mauris erat. Fusce quis faucibus nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam id risus enim. Nulla feugiat, erat ut egestas tempus, ante odio condimentum nulla, non cursus eros erat quis velit. In vestibulum rutrum orci a blandit. Mauris accumsan magna vitae quam vehicula nec condimentum nulla semper. Morbi tristique est sed nunc accumsan posuere. Fusce pulvinar diam eget sapien vulputate feugiat. Mauris nisl tellus, gravida non elementum non, iaculis sit amet ligula. Suspendisse eget est in arcu volutpat auctor. Curabitur posuere viverra elit, in tincidunt erat commodo nec. Nam scelerisque neque vitae sapien tristique tincidunt fringilla libero ornare.
</div><!-- inside -->
<div class="inside">
<div class="header" id="lower">Lower Header</div>
<br class="clear">
Sed in leo vitae felis consequat rutrum. Mauris dolor lacus, pharetra nec cursus eget, vehicula sed arcu. Integer non tellus ac orci placerat gravida sit amet ac lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consequat semper vehicula. Nam placerat, turpis sit amet lobortis vehicula, sapien libero cursus dui, dictum aliquet massa nisl vitae nisl. Nulla facilisi. Ut vel malesuada odio. Vestibulum metus massa, convallis tincidunt sollicitudin eu, ornare at nulla. Curabitur orci tellus, egestas ac vulputate vel, semper non dui. Sed nec eros quam. Suspendisse sed auctor lorem.
Suspendisse feugiat vehicula augue, sit amet aliquam purus volutpat eget. Sed sagittis lacinia mollis. Maecenas a leo nisl, in faucibus lectus. Pellentesque eget ipsum a justo convallis placerat in sit amet enim. Suspendisse tincidunt, tortor sed lacinia semper, magna justo molestie arcu, sed lacinia sem sem vel mi. Maecenas dictum, massa euismod dignissim tincidunt, eros ipsum pretium libero, nec dapibus sem augue et metus. Integer vel egestas est. Curabitur blandit quam at diam sollicitudin fringilla. Pellentesque vulputate egestas ante sit amet lobortis. Nunc aliquet imperdiet justo at mollis. Etiam ut tortor vel elit scelerisque congue aliquam sit amet metus. Aenean mauris lorem, eleifend non faucibus id, interdum sollicitudin sapien. Nam non mauris sed diam ullamcorper aliquam. Praesent euismod vehicula ultricies. Quisque dignissim ultricies mauris, convallis rutrum risus accumsan vel.
Ut velit sapien, placerat pellentesque dapibus vel, ultricies ac nibh. Praesent a diam et sapien condimentum imperdiet. Cras quis pulvinar purus. Vestibulum id nibh elit, et ullamcorper velit. Quisque interdum lacus nulla, eget faucibus leo. Morbi rutrum dictum turpis, vitae commodo massa facilisis ut. Vestibulum non mattis purus. Duis dapibus lobortis eros accumsan vulputate. Nunc nisl augue, lobortis id vulputate in, blandit id lorem. Cras a ligula odio, eu porttitor velit. Proin fringilla consequat libero vel porta. Nam lorem orci, hendrerit et cursus in, rhoncus tincidunt mauris. Nunc rhoncus pellentesque scelerisque. Fusce hendrerit hendrerit ligula. Quisque ut sem augue, nec tempor leo.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla quis mauris erat. Fusce quis faucibus nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam id risus enim. Nulla feugiat, erat ut egestas tempus, ante odio condimentum nulla, non cursus eros erat quis velit. In vestibulum rutrum orci a blandit. Mauris accumsan magna vitae quam vehicula nec condimentum nulla semper. Morbi tristique est sed nunc accumsan posuere. Fusce pulvinar diam eget sapien vulputate feugiat. Mauris nisl tellus, gravida non elementum non, iaculis sit amet ligula. Suspendisse eget est in arcu volutpat auctor. Curabitur posuere viverra elit, in tincidunt erat commodo nec. Nam scelerisque neque vitae sapien tristique tincidunt fringilla libero ornare.
</div><!-- inside -->
</div>
</body>
</html>