/
demo.html
81 lines (65 loc) · 18 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery ScrollFix</title>
<style type="text/css">
body {font-family: sans-serif;}
h1 {margin-top: 0; font-size: 2em;}
h2 {margin-top: 0; font-size: 1.5em;}
h3 {font-size: 1.0em; text-decoration: underline;}
a {color: #238923; text-decoration: underline;}
a:hover {color: #000;}
p {margin: 1em 0; padding: 0.5em; background-color: #eee;}
#wrapper {max-width: 800px; min-width: 600px; margin: 0 auto;}
#header {margin-bottom: 1em; padding: 5em; background-color: #dcdcdc; text-align: center;}
.top-bar, .bottom-bar, .middle-bar {padding: 1em; background-color: #000; color: #fff;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>ScrollFix demo</h1>
<p>Try scrolling vertically, resizing the window and scrolling horizontally.</p>
</div>
<div class="top-bar">
I stick to the top.
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet consectetuer elit pretium enim feugiat fringilla. A massa consectetuer eget suscipit laoreet rhoncus consequat Aliquam risus mauris. A tortor justo eu sodales ante convallis Vivamus vestibulum ullamcorper at. Et Vestibulum ultrices iaculis orci amet consequat commodo morbi id Vestibulum. Mauris mauris ut velit aliquet augue turpis vitae nulla vel et. Lacinia Curabitur Vivamus Nulla nibh vel orci dui tellus sit metus. Ipsum tortor sit nisl dapibus ligula Morbi consequat pellentesque pede sit. Ut nec vitae orci turpis Quisque Donec vestibulum elit ut ut. Interdum magnis elit dolor pretium sed molestie risus enim neque volutpat. Urna lacinia In eu id Quisque Lorem molestie felis nisl Phasellus. Lacinia Curabitur adipiscing accumsan felis cursus eget Nunc augue eget pellentesque. Nam ante elit metus Curabitur elit nunc lorem nunc enim orci. Hendrerit feugiat sem libero elit et felis justo nibh tristique Curabitur. Neque nisl.</p>
<p>Quam at Cum lacus ipsum wisi congue Phasellus augue faucibus et. Vitae non justo faucibus amet wisi Phasellus pulvinar nibh nunc lacinia. Tincidunt quam condimentum Nulla consectetuer ligula at feugiat justo elit a. Elit vitae massa Aliquam fames fermentum libero wisi accumsan quis tempor. Laoreet urna et platea purus ipsum lorem tristique pede Pellentesque convallis. Nibh eu In Vivamus nibh consectetuer tortor ac justo tempor felis. Nam enim pellentesque egestas vitae Pellentesque nunc Curabitur fames sed id. Lacinia elit Nam ridiculus arcu velit eleifend vitae cursus congue nisl. Interdum fermentum Phasellus Vestibulum quis nonummy ipsum amet pellentesque nunc Praesent. Urna euismod Aenean et volutpat Sed porta eu ultrices pretium tellus. Laoreet condimentum montes a in enim pede Phasellus gravida pretium sagittis. Leo Phasellus ut Maecenas Nam et nonummy et tristique ut quis. Ipsum Curabitur Phasellus Curabitur Donec fames ut Nam Aenean id orci. Ac tellus tristique sagittis laoreet elit faucibus Sed justo ante turpis. In adipiscing tincidunt Morbi libero turpis sed id malesuada nisl ut. Nec lorem lorem at urna dictum nulla ac ridiculus Curabitur morbi. Venenatis dui dolor enim Pellentesque ante urna Maecenas ut ligula Nulla. A tempus sit at pede.</p>
<p>Amet Vestibulum platea in at sagittis a Sed felis justo orci. Sed Pellentesque ut Aenean orci vitae nibh vel Nam Lorem pulvinar. Ultrices adipiscing Donec velit ut congue lorem Vestibulum malesuada venenatis sed. A consequat Nam Vestibulum convallis tristique augue tristique Morbi tortor egestas. Interdum quis Vestibulum eget facilisis libero id nec aliquet volutpat Curabitur. Tellus pellentesque adipiscing et aliquam auctor Aenean a Vivamus sit ac. Lacinia massa Curabitur volutpat Maecenas scelerisque Vivamus Cras neque Vestibulum magna. Massa quis rutrum Pellentesque egestas ut elit convallis id magna vel. Mauris dui malesuada wisi Sed ornare nibh augue Curabitur adipiscing nibh. Vestibulum mauris magnis dictumst adipiscing habitasse Vestibulum pretium justo tellus et. Nunc Maecenas tortor non Phasellus aliquam cursus nulla orci nibh Duis. Mauris Nulla vitae ipsum nunc dui est tempor lacinia mauris dolor. At congue Aenean aliquam Phasellus enim habitasse rhoncus nec Nulla ut. Nulla auctor adipiscing Maecenas Nulla risus felis accumsan Pellentesque vel metus. Faucibus Mauris tincidunt elit mauris et id accumsan sapien non orci. Quis gravida eget porta Vestibulum urna Cras tincidunt lobortis nec commodo. Convallis sed sagittis pellentesque Vivamus Nunc dui sed massa In lacinia. Nunc id dictumst risus adipiscing pretium tellus Donec tincidunt tempor sit. Fusce mi ligula vel massa volutpat turpis orci tincidunt Curabitur lacus. Lorem porta tincidunt Nam natoque Nulla Maecenas Nullam quis quis porttitor. Metus urna eu wisi tincidunt venenatis tempus at lobortis adipiscing est. Nam nascetur Nullam nisl ornare adipiscing et orci pretium nulla Aenean. Hendrerit Nullam tellus in nisl augue vitae condimentum Vestibulum rutrum condimentum. Cursus vel neque tincidunt hendrerit pellentesque id eros fermentum malesuada auctor. Sed habitasse nascetur Curabitur sapien Aliquam nonummy facilisis non consectetuer turpis. </p>
<p>Lorem Nullam cursus consequat gravida fringilla lacus sollicitudin consectetuer ut vitae. Feugiat nisl a malesuada lobortis senectus justo tincidunt ac mi elit. Augue quis adipiscing interdum id laoreet Phasellus eget lacinia pretium Vestibulum. Odio Vestibulum Phasellus Quisque wisi massa morbi wisi fames orci congue. Phasellus hendrerit ridiculus Nunc at elit turpis at adipiscing a et. Tincidunt elit interdum malesuada adipiscing Maecenas urna consequat Sed elit vel. Tincidunt sit lacinia augue ut Morbi id interdum id Aliquam tortor. Augue habitant id vel ut id metus metus accumsan enim purus. Maecenas arcu nibh neque sit id dictum felis Curabitur Maecenas porta. Wisi vel et est convallis Nunc egestas Praesent a interdum augue. Lacinia vitae ut dictum scelerisque feugiat nunc a turpis Donec nascetur. Nunc id Nam gravida vel elit mauris nec congue Integer congue. Nullam id id libero Curabitur lacinia at suscipit montes natoque enim. Orci leo ipsum tempor eros sit metus nibh tristique Aenean ante. Magna Curabitur Phasellus Vivamus Pellentesque quis habitant laoreet nec vitae felis. Tincidunt lacus volutpat tincidunt hendrerit Cum dui Nam sagittis ipsum orci. Nulla urna enim et tellus congue orci Fusce wisi non nibh. Tortor semper justo laoreet Nam cursus Sed Sed tristique nibh.</p>
<p>Pede mi et eu lobortis augue ipsum Vivamus ipsum et semper. Nunc nibh ut laoreet nibh semper pede venenatis justo risus facilisi. Elit justo aliquet elit mauris magna mus libero nibh tincidunt mauris. Dui sit massa tellus venenatis condimentum faucibus facilisis et lacinia quis. Id dis mauris odio Vivamus Quisque at dolor dui laoreet lobortis. Lorem eros tempus id urna orci pharetra et Curabitur libero adipiscing. Leo eu dictumst urna velit at a eget id semper in. Adipiscing dictumst a Curabitur eu feugiat nunc Aliquam consequat amet sapien. Condimentum ac lorem in sodales amet Vivamus leo odio tortor ac. Neque egestas hac vitae Vestibulum Suspendisse diam semper vitae eget accumsan. Tempus malesuada libero In malesuada hac Cras porttitor mi tincidunt ac. Porttitor dignissim tortor cursus Vivamus Vestibulum Suspendisse euismod tincidunt Phasellus pellentesque. Dolor est lacus interdum semper justo et ac In tempus Mauris. Aliquam et Nam dui semper laoreet orci arcu et nec quis. Quis vitae mauris penatibus netus tincidunt id leo massa volutpat ac. Feugiat augue nunc Donec tincidunt vitae sagittis montes enim Pellentesque lacinia. Hendrerit Nam enim ligula congue orci quis velit Morbi nec tellus. Lacus vel felis parturient tellus nunc Nam Vestibulum In Vestibulum vestibulum. Vestibulum quis magna Praesent tempus suscipit laoreet quam Vestibulum lorem Sed. Porttitor quis Aliquam Phasellus fringilla consequat leo vitae metus id nibh. Cum nisl sem nec pede sem et Phasellus gravida urna orci. Ac nonummy wisi nec ridiculus et wisi metus suscipit.</p>
<p>Mus aliquet nonummy cursus volutpat Vestibulum senectus habitant risus et justo. Ac Sed Aliquam quis consequat enim interdum velit Nulla ante ut. Sed non suscipit justo Curabitur wisi quis nisl Vivamus malesuada egestas. Lorem vel nibh elit pede sagittis risus sit ligula interdum sit. Tempus sapien neque nibh convallis pellentesque Suspendisse wisi cursus hendrerit Curabitur. Semper quis auctor et gravida et risus commodo orci consectetuer volutpat. Id lobortis nunc et Sed est elit volutpat augue Donec Nunc. Ante vitae Nulla Sed nibh In Aenean metus auctor Suspendisse a. Amet Pellentesque tincidunt et aliquet Nunc Nam Proin magna velit libero. Ut urna convallis congue et eros pharetra Curabitur pede Integer urna. Sed id Quisque Suspendisse a lacus nunc ut Ut condimentum wisi. Nulla urna odio consectetuer augue accumsan Vestibulum tortor vel natoque purus. Leo quis sollicitudin arcu in nibh Vestibulum ligula Aenean ac Vivamus. Eget scelerisque lobortis Quisque nulla malesuada et et risus nibh libero. Feugiat tellus Integer quam magna lorem pulvinar ante ante mattis Sed. Lorem Integer In vel pretium pulvinar id elit dictumst ultrices wisi. Sit ut amet pretium Curabitur mus malesuada accumsan tortor justo lacus. Enim urna id leo nibh dapibus netus volutpat facilisi dui ut. Praesent et nibh tellus volutpat laoreet quis Vivamus et sem Donec. Gravida Suspendisse lobortis a porttitor mauris tortor ut In cursus penatibus. Mauris Duis lacinia Integer felis volutpat Mauris mauris metus Pellentesque In. Pede pretium Phasellus vel Vestibulum iaculis hendrerit purus nisl magna mollis. Vestibulum et tristique odio at velit dolor eros Nulla est mauris. Sit et elit ut eget In tempus et turpis quis.</p>
<div class="middle-bar">I stick to either side.</div>
<p>Dolor elit et Pellentesque netus Integer eros auctor venenatis justo in. Mauris libero at non congue interdum ultrices parturient volutpat augue dictumst. Amet sem eget convallis Vestibulum vitae dapibus metus dolor commodo ut. Ac sed ac enim ante dui elit enim pede justo Curabitur. Nullam eleifend dignissim condimentum eu et congue Nam sem dui wisi. Lacus neque non Cras lacinia quis enim pretium aliquet et netus. Vestibulum nulla congue pharetra et tortor Lorem tempus nibh neque nibh. Pretium eget In Donec quis ridiculus fringilla porta hendrerit Phasellus Morbi. Semper Vestibulum Nunc et convallis montes porttitor facilisis quis justo Nulla. Nec Quisque morbi nascetur felis laoreet Curabitur tellus Pellentesque faucibus massa. Tortor quis fermentum Proin convallis Morbi aliquam sem ligula metus accumsan. Laoreet Pellentesque Vivamus congue non consectetuer sed dolor sapien eu faucibus. Curabitur Sed interdum sed tincidunt sem ut nec nibh lacinia Vestibulum. Cursus quis pellentesque laoreet leo Fusce leo senectus et lobortis laoreet. Interdum turpis facilisi tortor ipsum dictum Fusce eu tincidunt ridiculus felis. Facilisis Curabitur lacus tristique Lorem gravida turpis laoreet Integer odio elit. Facilisis quis cursus pretium elit leo Proin et Vestibulum quam Maecenas. Risus hendrerit Aliquam vel aliquet pellentesque elit vitae tellus nisl ligula. Sed vitae laoreet Sed dolor orci In lobortis sit massa volutpat. Cursus eget Aenean sapien porta Nullam tristique Nullam id est ut. Wisi libero Donec Lorem nec feugiat In adipiscing tincidunt ut sit. Parturient ipsum mollis massa quis laoreet magna Sed sed convallis consequat. Sapien Lorem semper dui tristique pretium massa ipsum ultrices Aliquam cursus. Pretium Curabitur mauris vel Pellentesque Morbi quis justo Morbi malesuada a. Amet fringilla mauris et euismod et lorem nunc.</p>
<p>Suscipit Vestibulum est ridiculus odio ut fermentum commodo dictum sed nulla. Tortor non Aenean sed amet feugiat dui felis quam sapien Lorem. Mauris a enim neque sit ante faucibus sapien accumsan lacus ipsum. Tortor at fringilla Vestibulum sem consectetuer et pede orci scelerisque Sed. Dolor mollis Cum hendrerit leo Aenean eget Cras quis Aliquam auctor. Tempus orci mus tincidunt sit justo facilisi eleifend tristique et Ut. Vitae risus molestie wisi eros wisi urna Curabitur id consequat cursus. Eget at accumsan habitant tortor enim eu Vivamus aliquam netus rhoncus. Ut elit a vitae augue tempor Sed neque et tortor condimentum. Gravida dictumst velit elit.</p>
<p>Enim sit sed vel Nam Ut sed nibh non eget et. Platea platea consequat orci elit quam quis tellus urna Sed lacinia. Ultrices sollicitudin et elit In Praesent metus quam sed tristique Maecenas. Mi Pellentesque ac elit Vestibulum rutrum justo eu cursus nibh Aenean. Faucibus felis eu a Curabitur feugiat wisi odio lorem at ac. Lacus lorem metus mauris venenatis cursus tristique euismod a nascetur faucibus. Auctor ac Nam ut elit risus Aliquam dui vitae dolor Quisque. Orci at pulvinar in et et risus turpis molestie justo Nam. In accumsan enim gravida Aliquam urna ornare libero nibh wisi vitae. Risus euismod orci tincidunt urna Sed sociis eget dolor urna sagittis. Semper elit id Vestibulum a nibh sagittis vel convallis pede malesuada. Sed massa Proin quis eu interdum molestie ullamcorper a laoreet id. Justo nibh nibh ac Aliquam orci tincidunt dictum augue consectetuer condimentum. Id Nulla quis In Nunc consequat urna nec parturient ullamcorper sem. Quis lorem id volutpat a eu platea malesuada Maecenas Duis arcu. Lobortis Suspendisse porta Integer eget pulvinar In felis mauris risus lacinia. Morbi sit dolor et pretium Pellentesque id malesuada eget lacus a. Nibh et mauris ipsum in Pellentesque ultrices mauris tempus amet quis. Enim nibh leo mi at gravida libero urna lobortis ac massa. Volutpat parturient auctor Sed a ante justo pede et faucibus urna. Quis vel Pellentesque consequat Pellentesque justo Sed Lorem lorem et laoreet. Nascetur id enim dolor pharetra et ante Donec montes et quam. Vestibulum orci enim consequat tempor pede dolor Morbi sodales cursus dapibus. Ligula id libero elit urna justo Curabitur quis Sed Quisque id. Convallis at elit ut Vestibulum Nulla Phasellus justo ipsum libero adipiscing. Amet mauris sit sem pellentesque et nibh Ut dis egestas tempor. Cursus nisl ut Quisque semper laoreet justo dapibus euismod sodales Ut. Non vestibulum ut orci Phasellus congue risus et felis platea et. Et et ridiculus felis habitant enim convallis nunc Aliquam Curabitur urna. Lacus at condimentum ante eros tincidunt dui In libero nonummy Curabitur. Vestibulum Nam consequat ac quis a massa tortor quis Suspendisse semper. In eget congue ac amet fringilla ac Duis elit lacinia Suspendisse. Vivamus velit Vivamus Maecenas neque eget rutrum tellus neque elit tellus. Convallis velit sed ante ut lacinia netus leo consectetuer penatibus.</p>
<p>Tempus ridiculus et Nullam tincidunt laoreet Maecenas et ante Pellentesque non. Dictum consequat lobortis ipsum nulla ut id lacus ut justo dui. Eget convallis Vivamus Maecenas Pellentesque Integer ornare at lorem justo nulla. Rutrum porttitor purus a gravida non nibh Morbi felis penatibus massa. Dolor tincidunt id sodales euismod ut sodales turpis In justo Nam. Est lacus laoreet Cras pharetra sit eros non lobortis Curabitur Vestibulum. Elit odio dictumst urna eleifend eget ipsum feugiat In turpis quis. Pellentesque Sed vitae wisi elit eget amet Vestibulum neque eleifend Ut. Elit hendrerit turpis ut Curabitur Pellentesque convallis vel et justo enim. Urna laoreet dui lobortis volutpat lorem augue Sed faucibus euismod fringilla. Nibh ut venenatis sed a urna lacinia amet netus interdum mauris. Semper congue a urna et feugiat dui lacus tellus tempus est. Curabitur vel Maecenas nisl nibh nibh id lorem eros dolor justo. Elit In sodales dolor convallis purus sem et et neque lacinia. Magna egestas quis Integer nec lacinia Sed pretium senectus quis fames. Ac accumsan wisi vitae tempor sapien augue tristique enim convallis accumsan. Amet eget Curabitur orci nibh nibh nulla ornare mollis Cum lorem. Consectetuer arcu interdum quis et elit nibh et massa Nam in. Ut sapien faucibus elit lacinia adipiscing orci justo adipiscing Nam dui. Et id accumsan nascetur Suspendisse eget felis dictum elit massa vel. Eget neque urna vitae Vivamus Quisque est massa urna elit magnis. Dictum lacus rutrum Cras pretium pretium libero nibh Lorem pellentesque amet. Id non Aenean justo laoreet natoque turpis euismod nunc sagittis metus. Vel et venenatis Phasellus at habitasse gravida nascetur condimentum pede felis. Arcu hendrerit sem et adipiscing condimentum quis et odio fringilla enim. Lorem tincidunt consectetuer Nam egestas semper eget pede aliquet est ut. Vitae venenatis urna accumsan et Pellentesque id sodales leo fringilla et. Ante nec sapien ut nunc vel et dignissim condimentum Aliquam porttitor. Euismod interdum Nam a id justo Quisque ante orci Suspendisse mauris. Amet Aenean Sed consequat nibh nulla Praesent malesuada tellus Nulla risus. Dapibus tellus ac arcu netus sed laoreet vitae pharetra Nulla ligula. Sit egestas pede nunc Maecenas malesuada nec turpis pretium tortor Curabitur. Enim Suspendisse quam ante Vivamus id condimentum sapien turpis ipsum consequat. Enim et amet Proin vel interdum nunc pretium a at semper. Neque pellentesque Curabitur nibh Curabitur Curabitur condimentum semper amet netus Donec. Vivamus et at velit accumsan ante Nunc semper hendrerit sit Pellentesque. </p>
</div>
<div class="bottom-bar">
I stick to the bottom.
</div>
<p>Lorem ipsum dolor sit amet consectetuer elit pretium enim feugiat fringilla.</p>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="src/scrollfix.js"></script>
<script type="text/javascript">
// top bar
$('.top-bar').scrollFix({
side: 'top'
});
// middle bar
$('.middle-bar').scrollFix({
side: 'both',
topPosition: 50, // after the top bar
bottomPosition: 50 // before the bottom bar
});
// bottom bar
$('.bottom-bar').scrollFix({
side: 'bottom'
});
</script>
</body>
</html>