This repository has been archived by the owner on Mar 4, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathdemo.html
64 lines (63 loc) · 14.4 KB
/
demo.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>Sticky Element Demo</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.stickyelement.js"></script>
<style>
/* These are not needed, only used for the demo */
body {width:700px;margin:0 auto;}
.container {overflow:hidden;position:relative;}
.sidebar {float:left;width:200px;padding:0 20px;}
.content {float:left;width:400px;padding:0 20px;border-right:1px solid black;}
/* These are not needed, only used for the demo */
</style>
<script type="text/javascript">
$(function(){
// Initialize the sticky scrolling on an item
$('.sidebar').sticky('.container');
// Using an event
$('.sidebar').on('sticky-hit-bottom', function (){
console.log('Hit bottom');
})
});
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis libero lectus, rutrum sagittis egestas et, ultricies eu tellus. Nam eleifend, ligula vel dignissim adipiscing, quam elit tincidunt felis, ac venenatis tortor massa vel enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum augue sed nulla semper nec luctus enim vestibulum. Proin nec imperdiet nunc. Curabitur condimentum, nibh vel aliquet congue, augue felis sollicitudin arcu, in rhoncus nisi ipsum sed turpis. Morbi semper euismod sagittis. Vivamus vitae libero lorem, at imperdiet nisl. Quisque varius turpis eget nulla consectetur placerat. Vestibulum tortor nulla, luctus molestie consequat et, hendrerit a lorem. Ut ac nunc purus, vitae sodales neque.</p>
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis libero lectus, rutrum sagittis egestas et, ultricies eu tellus. Nam eleifend, ligula vel dignissim adipiscing, quam elit tincidunt felis, ac venenatis tortor massa vel enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum augue sed nulla semper nec luctus enim vestibulum. Proin nec imperdiet nunc. Curabitur condimentum, nibh vel aliquet congue, augue felis sollicitudin arcu, in rhoncus nisi ipsum sed turpis. Morbi semper euismod sagittis. Vivamus vitae libero lorem, at imperdiet nisl. Quisque varius turpis eget nulla consectetur placerat. Vestibulum tortor nulla, luctus molestie consequat et, hendrerit a lorem. Ut ac nunc purus, vitae sodales neque.</p>
<p>Nunc id mauris in lacus pellentesque convallis sit amet in enim. Phasellus aliquam, mi in congue volutpat, nulla mi rutrum nisl, ut gravida risus mauris ac purus. Vivamus malesuada vestibulum augue et dapibus. Donec commodo orci eget dolor lobortis cursus. Maecenas sit amet malesuada odio. Sed posuere nisl pretium justo porttitor sed rutrum dui eleifend. Suspendisse a lacus ac massa fermentum mattis. Aenean ut mollis felis. Ut elementum ornare tincidunt. Fusce elementum mi in justo viverra quis elementum sem aliquam. Curabitur sit amet sem id lacus auctor semper. Nam in nibh eget odio mattis vestibulum vel ac libero. Maecenas at condimentum nisi. Aliquam elementum felis id libero porta non consectetur massa iaculis. Pellentesque consequat mollis porttitor. Etiam tempus arcu tellus.</p>
<p>Integer pellentesque scelerisque turpis at pharetra. Sed lobortis tellus a felis scelerisque vitae aliquet odio consectetur. Quisque porttitor consectetur dolor, vel vulputate odio porta vel. Praesent nunc purus, interdum ac consequat ut, convallis ac tellus. Ut dapibus dignissim velit, in mollis dolor auctor nec. Nam ut ante ante, sed gravida mauris. Sed eget nisi non enim rutrum ultrices.</p>
<p>Maecenas quis massa id nibh molestie ultrices in sed purus. Maecenas lacinia dui a diam aliquam id ultrices dui consectetur. Pellentesque quis felis sit amet augue consequat lacinia. Nunc commodo nisi eget nibh tristique eu imperdiet nunc porttitor. Aenean quis augue id tortor cursus laoreet vel ac lorem. Aenean pellentesque quam ac lectus molestie posuere. In nec risus massa. Vestibulum a dolor mauris. Aenean in odio turpis. Etiam sed ante sed massa ullamcorper scelerisque. Nam non posuere odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin erat augue, congue quis condimentum sed, eleifend id eros. Ut pellentesque mi quis justo adipiscing at sollicitudin odio interdum. Cras id rutrum magna. Maecenas a orci nisl.</p>
<p>In ut nulla purus, non bibendum arcu. In pellentesque consequat urna, id venenatis tellus imperdiet non. Nam eros lacus, pretium mollis varius a, lobortis quis arcu. Sed tempus, enim at euismod sagittis, risus mi tincidunt nibh, ut facilisis est libero ac odio. Duis at rutrum felis. Maecenas tempor hendrerit gravida. Curabitur nec velit enim, in lacinia enim. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam felis lectus, vehicula eu aliquet interdum, accumsan a lectus. Vestibulum sodales mi ac leo auctor eget viverra lacus eleifend. Cras sed leo massa. Maecenas mattis interdum metus, in bibendum justo adipiscing a. Phasellus lectus nulla, pharetra eu interdum eget, viverra non libero. Etiam ac leo mauris, at condimentum magna. Morbi et magna id est iaculis vehicula ut quis nisl.</p>
</div>
<div class="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis libero lectus, rutrum sagittis egestas et, ultricies eu tellus.</p>
</div>
</div>
<div>END</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis libero lectus, rutrum sagittis egestas et, ultricies eu tellus. Nam eleifend, ligula vel dignissim adipiscing, quam elit tincidunt felis, ac venenatis tortor massa vel enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum augue sed nulla semper nec luctus enim vestibulum. Proin nec imperdiet nunc. Curabitur condimentum, nibh vel aliquet congue, augue felis sollicitudin arcu, in rhoncus nisi ipsum sed turpis. Morbi semper euismod sagittis. Vivamus vitae libero lorem, at imperdiet nisl. Quisque varius turpis eget nulla consectetur placerat. Vestibulum tortor nulla, luctus molestie consequat et, hendrerit a lorem. Ut ac nunc purus, vitae sodales neque.</p>
<p>Nunc id mauris in lacus pellentesque convallis sit amet in enim. Phasellus aliquam, mi in congue volutpat, nulla mi rutrum nisl, ut gravida risus mauris ac purus. Vivamus malesuada vestibulum augue et dapibus. Donec commodo orci eget dolor lobortis cursus. Maecenas sit amet malesuada odio. Sed posuere nisl pretium justo porttitor sed rutrum dui eleifend. Suspendisse a lacus ac massa fermentum mattis. Aenean ut mollis felis. Ut elementum ornare tincidunt. Fusce elementum mi in justo viverra quis elementum sem aliquam. Curabitur sit amet sem id lacus auctor semper. Nam in nibh eget odio mattis vestibulum vel ac libero. Maecenas at condimentum nisi. Aliquam elementum felis id libero porta non consectetur massa iaculis. Pellentesque consequat mollis porttitor. Etiam tempus arcu tellus.</p>
<p>Integer pellentesque scelerisque turpis at pharetra. Sed lobortis tellus a felis scelerisque vitae aliquet odio consectetur. Quisque porttitor consectetur dolor, vel vulputate odio porta vel. Praesent nunc purus, interdum ac consequat ut, convallis ac tellus. Ut dapibus dignissim velit, in mollis dolor auctor nec. Nam ut ante ante, sed gravida mauris. Sed eget nisi non enim rutrum ultrices.</p>
<p>Maecenas quis massa id nibh molestie ultrices in sed purus. Maecenas lacinia dui a diam aliquam id ultrices dui consectetur. Pellentesque quis felis sit amet augue consequat lacinia. Nunc commodo nisi eget nibh tristique eu imperdiet nunc porttitor. Aenean quis augue id tortor cursus laoreet vel ac lorem. Aenean pellentesque quam ac lectus molestie posuere. In nec risus massa. Vestibulum a dolor mauris. Aenean in odio turpis. Etiam sed ante sed massa ullamcorper scelerisque. Nam non posuere odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin erat augue, congue quis condimentum sed, eleifend id eros. Ut pellentesque mi quis justo adipiscing at sollicitudin odio interdum. Cras id rutrum magna. Maecenas a orci nisl.</p>
<p>In ut nulla purus, non bibendum arcu. In pellentesque consequat urna, id venenatis tellus imperdiet non. Nam eros lacus, pretium mollis varius a, lobortis quis arcu. Sed tempus, enim at euismod sagittis, risus mi tincidunt nibh, ut facilisis est libero ac odio. Duis at rutrum felis. Maecenas tempor hendrerit gravida. Curabitur nec velit enim, in lacinia enim. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam felis lectus, vehicula eu aliquet interdum, accumsan a lectus. Vestibulum sodales mi ac leo auctor eget viverra lacus eleifend. Cras sed leo massa. Maecenas mattis interdum metus, in bibendum justo adipiscing a. Phasellus lectus nulla, pharetra eu interdum eget, viverra non libero. Etiam ac leo mauris, at condimentum magna. Morbi et magna id est iaculis vehicula ut quis nisl.</p>
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis libero lectus, rutrum sagittis egestas et, ultricies eu tellus. Nam eleifend, ligula vel dignissim adipiscing, quam elit tincidunt felis, ac venenatis tortor massa vel enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum augue sed nulla semper nec luctus enim vestibulum. Proin nec imperdiet nunc. Curabitur condimentum, nibh vel aliquet congue, augue felis sollicitudin arcu, in rhoncus nisi ipsum sed turpis. Morbi semper euismod sagittis. Vivamus vitae libero lorem, at imperdiet nisl. Quisque varius turpis eget nulla consectetur placerat. Vestibulum tortor nulla, luctus molestie consequat et, hendrerit a lorem. Ut ac nunc purus, vitae sodales neque.</p>
<p>Nunc id mauris in lacus pellentesque convallis sit amet in enim. Phasellus aliquam, mi in congue volutpat, nulla mi rutrum nisl, ut gravida risus mauris ac purus. Vivamus malesuada vestibulum augue et dapibus. Donec commodo orci eget dolor lobortis cursus. Maecenas sit amet malesuada odio. Sed posuere nisl pretium justo porttitor sed rutrum dui eleifend. Suspendisse a lacus ac massa fermentum mattis. Aenean ut mollis felis. Ut elementum ornare tincidunt. Fusce elementum mi in justo viverra quis elementum sem aliquam. Curabitur sit amet sem id lacus auctor semper. Nam in nibh eget odio mattis vestibulum vel ac libero. Maecenas at condimentum nisi. Aliquam elementum felis id libero porta non consectetur massa iaculis. Pellentesque consequat mollis porttitor. Etiam tempus arcu tellus.</p>
<p>Integer pellentesque scelerisque turpis at pharetra. Sed lobortis tellus a felis scelerisque vitae aliquet odio consectetur. Quisque porttitor consectetur dolor, vel vulputate odio porta vel. Praesent nunc purus, interdum ac consequat ut, convallis ac tellus. Ut dapibus dignissim velit, in mollis dolor auctor nec. Nam ut ante ante, sed gravida mauris. Sed eget nisi non enim rutrum ultrices.</p>
<p>Maecenas quis massa id nibh molestie ultrices in sed purus. Maecenas lacinia dui a diam aliquam id ultrices dui consectetur. Pellentesque quis felis sit amet augue consequat lacinia. Nunc commodo nisi eget nibh tristique eu imperdiet nunc porttitor. Aenean quis augue id tortor cursus laoreet vel ac lorem. Aenean pellentesque quam ac lectus molestie posuere. In nec risus massa. Vestibulum a dolor mauris. Aenean in odio turpis. Etiam sed ante sed massa ullamcorper scelerisque. Nam non posuere odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin erat augue, congue quis condimentum sed, eleifend id eros. Ut pellentesque mi quis justo adipiscing at sollicitudin odio interdum. Cras id rutrum magna. Maecenas a orci nisl.</p>
<p>In ut nulla purus, non bibendum arcu. In pellentesque consequat urna, id venenatis tellus imperdiet non. Nam eros lacus, pretium mollis varius a, lobortis quis arcu. Sed tempus, enim at euismod sagittis, risus mi tincidunt nibh, ut facilisis est libero ac odio. Duis at rutrum felis. Maecenas tempor hendrerit gravida. Curabitur nec velit enim, in lacinia enim. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam felis lectus, vehicula eu aliquet interdum, accumsan a lectus. Vestibulum sodales mi ac leo auctor eget viverra lacus eleifend. Cras sed leo massa. Maecenas mattis interdum metus, in bibendum justo adipiscing a. Phasellus lectus nulla, pharetra eu interdum eget, viverra non libero. Etiam ac leo mauris, at condimentum magna. Morbi et magna id est iaculis vehicula ut quis nisl.</p>
</div>
<div class="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis libero lectus, rutrum sagittis egestas et, ultricies eu tellus.</p>
</div>
</div>
<div>END</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis libero lectus, rutrum sagittis egestas et, ultricies eu tellus. Nam eleifend, ligula vel dignissim adipiscing, quam elit tincidunt felis, ac venenatis tortor massa vel enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum augue sed nulla semper nec luctus enim vestibulum. Proin nec imperdiet nunc. Curabitur condimentum, nibh vel aliquet congue, augue felis sollicitudin arcu, in rhoncus nisi ipsum sed turpis. Morbi semper euismod sagittis. Vivamus vitae libero lorem, at imperdiet nisl. Quisque varius turpis eget nulla consectetur placerat. Vestibulum tortor nulla, luctus molestie consequat et, hendrerit a lorem. Ut ac nunc purus, vitae sodales neque.</p>
<p>Nunc id mauris in lacus pellentesque convallis sit amet in enim. Phasellus aliquam, mi in congue volutpat, nulla mi rutrum nisl, ut gravida risus mauris ac purus. Vivamus malesuada vestibulum augue et dapibus. Donec commodo orci eget dolor lobortis cursus. Maecenas sit amet malesuada odio. Sed posuere nisl pretium justo porttitor sed rutrum dui eleifend. Suspendisse a lacus ac massa fermentum mattis. Aenean ut mollis felis. Ut elementum ornare tincidunt. Fusce elementum mi in justo viverra quis elementum sem aliquam. Curabitur sit amet sem id lacus auctor semper. Nam in nibh eget odio mattis vestibulum vel ac libero. Maecenas at condimentum nisi. Aliquam elementum felis id libero porta non consectetur massa iaculis. Pellentesque consequat mollis porttitor. Etiam tempus arcu tellus.</p>
</body>
</html>