├── jquery.jscroll.js
└── sample
    └── index.html


/jquery.jscroll.js:
--------------------------------------------------------------------------------
 1 | // ####################################################################################
 2 | // #######                                                                      #######
 3 | // ####### Plugin:      jScroll                                                 #######
 4 | // ####### Author:      William Duffy                                           #######
 5 | // ####### Website:     http://www.wduffy.co.uk/jScroll                         #######
 6 | // ####### Version:     1.1	                                                    #######
 7 | // #######                                                                      #######
 8 | // ####### Copyright (c) 2011, William Duffy - www.wduffy.co.uk                 #######
 9 | // #######                                                                      #######
10 | // ####### Permission is hereby granted, free of charge, to any person          #######
11 | // ####### obtaining a copy of this software and associated documentation       #######
12 | // ####### files (the "Software"), to deal in the Software without              #######
13 | // ####### restriction, including without limitation the rights to use,         #######
14 | // ####### copy, modify, merge, publish, distribute, sublicense, and/or sell    #######
15 | // ####### copies of the Software, and to permit persons to whom the            #######
16 | // ####### Software is furnished to do so, subject to the following             #######
17 | // ####### conditions:                                                          #######
18 | // #######                                                                      #######
19 | // ####### The above copyright notice and this permission notice shall be       #######
20 | // ####### included in all copies or substantial portions of the Software.      #######
21 | // #######                                                                      #######
22 | // ####### THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,      #######
23 | // ####### EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES      #######
24 | // ####### OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND             #######
25 | // ####### NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT          #######
26 | // ####### HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,         #######
27 | // ####### WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING         #######
28 | // ####### FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR        #######
29 | // ####### OTHER DEALINGS IN THE SOFTWARE.                                      #######
30 | // #######                                                                      #######
31 | // ####################################################################################
32 | (function($) {
33 |     
34 |     // Public: jScroll Plugin
35 |     $.fn.jScroll = function(options) {
36 | 
37 |         var opts = $.extend({}, $.fn.jScroll.defaults, options);
38 | 
39 |         return this.each(function() {
40 | 			var $element = $(this);
41 | 			var $window = $(window);
42 | 			var locator = new location($element);
43 | 			
44 | 			$window.scroll(function() {
45 | 				$element
46 | 					.stop()
47 | 					.animate(locator.getMargin($window), opts.speed);
48 | 			});
49 |         });
50 | 		
51 | 		// Private 
52 | 		function location($element)
53 | 		{
54 | 			this.min = $element.offset().top;
55 | 			this.originalMargin = parseInt($element.css("margin-top"), 10) || 0;
56 | 			
57 | 			this.getMargin = function ($window)
58 | 			{
59 | 				var max = $element.parent().height() - $element.outerHeight();
60 | 				var margin = this.originalMargin;
61 | 			
62 | 				if ($window.scrollTop() >= this.min)
63 | 					margin = margin + opts.top + $window.scrollTop() - this.min; 
64 | 				
65 | 				if (margin > max)
66 | 					margin = max;
67 | 			
68 | 				return ({"marginTop" : margin + 'px'});
69 | 			}
70 | 		}	   
71 | 		
72 |     };
73 | 
74 |     // Public: Default values
75 |     $.fn.jScroll.defaults = {
76 |         speed	:	"slow",
77 | 		top		:	10
78 |     };
79 | 
80 | })(jQuery);


--------------------------------------------------------------------------------
/sample/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 | <html><head>
  3 | 	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  4 | 	<title>Keep element in view while scrolling using JQuery</title>
  5 | 	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  6 | 	<script type="text/javascript" src="../jquery.jscroll.js"></script>
  7 | 	<script type="text/javascript">
  8 | 		
  9 | 		$().ready(function() {
 10 | 			$(".scroll").jScroll();
 11 | 		});
 12 | 		
 13 | 	</script>
 14 | 	<style type="text/css">
 15 | 		
 16 | 		.container { 
 17 | 			background-color: #e3e3e3; 
 18 | 			margin: 0px 50px 100px 50px; 
 19 | 			padding: 50px;
 20 | 			}
 21 | 		
 22 | 		.text {
 23 | 		 	float: left;
 24 | 			width: 70%;
 25 | 			}
 26 | 		
 27 | 		.scroll {
 28 | 			float: left; 
 29 | 			width: 21%; 
 30 | 			padding: 0% 2% 2%; 
 31 | 			margin-left: 4%; 
 32 | 			margin-top: 85px; 
 33 | 			border: 2px solid red; 
 34 | 			background-color: #FFEEEE;
 35 | 			}
 36 | 		
 37 | 		.clear {
 38 | 			clear: both;
 39 | 			}
 40 | 		
 41 | 	</style>
 42 | </head><body>
 43 | 
 44 | <div class="container">
 45 | 	<div class="text">
 46 | 		<h1>Scroll Container A</h1>
 47 | 		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit 
 48 | 	amet nulla sem, nec consectetur velit. Aliquam tempus, nisl sed 
 49 | 	fringilla rutrum, tellus risus molestie nisl, nec molestie nunc tellus 
 50 | 	vitae urna. Sed ornare mollis metus ac eleifend. Nulla at purus leo. 
 51 | 	Vivamus egestas lorem vitae risus interdum vitae vehicula libero 
 52 | 	aliquam. Vestibulum cursus est vel tellus consectetur rutrum condimentum
 53 | 	 magna euismod. In venenatis dapibus dui, non laoreet tellus consectetur
 54 | 	 id. Fusce ut ornare turpis. Suspendisse in leo quis massa auctor 
 55 | 	laoreet ut eu lacus. Fusce cursus gravida sapien, non tincidunt risus 
 56 | 	convallis vel. Curabitur massa lorem, placerat quis ultrices at, 
 57 | 	volutpat scelerisque lorem. Praesent ut nibh nec felis facilisis 
 58 | 	fringilla. Etiam ullamcorper varius scelerisque. Suspendisse massa elit,
 59 | 	 eleifend at ultricies semper, fringilla eu velit. In aliquam vulputate 
 60 | 	sapien, rhoncus mattis nisl porta eu. In dui eros, luctus non faucibus 
 61 | 	at, placerat pellentesque justo. In quis lacus interdum magna rhoncus 
 62 | 	mollis non et nunc. Vivamus convallis tempor porttitor.</p>
 63 | 		<p>Quisque rhoncus volutpat semper. Mauris in venenatis neque. Ut 
 64 | 	sodales hendrerit augue vel feugiat. Fusce ante sapien, sodales et 
 65 | 	porttitor et, malesuada vitae augue. Suspendisse varius, quam in tempus 
 66 | 	aliquet, neque dolor ultricies libero, et tristique dolor nulla a justo.
 67 | 	 Nunc sit amet purus felis, id hendrerit quam. Vestibulum semper 
 68 | 	vulputate arcu ut gravida. Praesent et nisi nec lectus elementum porta. 
 69 | 	Nunc pulvinar mi at justo vulputate bibendum. Nunc dictum, nisi ac 
 70 | 	auctor volutpat, quam risus fringilla elit, in iaculis tortor felis et 
 71 | 	nulla. Pellentesque lacinia nisl at velit suscipit at adipiscing ligula 
 72 | 	gravida. Nam eu dolor ante, sit amet blandit ipsum. Donec quis enim 
 73 | 	ligula. Mauris auctor nibh non elit sollicitudin consequat. Phasellus 
 74 | 	semper sem et dui lobortis faucibus.</p>
 75 | 		<p>Sed dolor massa, placerat eget vehicula vel, pharetra vel leo. 
 76 | 	Suspendisse facilisis fermentum vulputate. Nulla eu pharetra diam. 
 77 | 	Aliquam tincidunt nunc sed diam congue a mollis nibh fringilla. Aliquam 
 78 | 	dictum enim vitae nulla pharetra molestie. Sed mollis, lacus porttitor 
 79 | 	ullamcorper pretium, dolor felis tempor elit, et tincidunt orci erat 
 80 | 	vitae felis. Maecenas pharetra accumsan sapien non auctor. Curabitur non
 81 | 	 risus at lacus egestas facilisis scelerisque gravida tortor. Duis 
 82 | 	lacinia dapibus arcu ac molestie. Proin magna neque, posuere ultricies 
 83 | 	fringilla sit amet, consectetur vel nibh. Nam quis augue eros, ac mollis
 84 | 	 neque. Fusce tincidunt vehicula auctor.</p>
 85 | 		<p>Morbi vel sapien arcu, a lobortis mauris. Phasellus placerat turpis 
 86 | 	at velit pretium adipiscing. Nullam viverra pretium odio in eleifend. 
 87 | 	Nullam et eleifend sem. Sed massa ante, sollicitudin a lacinia ut, 
 88 | 	eleifend sed sem. Sed quis lectus purus. Phasellus iaculis lectus et 
 89 | 	eros dictum id auctor elit porttitor. In volutpat, felis rutrum blandit 
 90 | 	fringilla, velit lacus imperdiet dui, nec pharetra lacus lorem ac 
 91 | 	sapien. Duis imperdiet, leo et adipiscing vestibulum, orci felis 
 92 | 	vulputate nunc, eu laoreet purus ipsum at lorem. Donec quis leo enim. 
 93 | 	Vivamus hendrerit elit purus, in laoreet mauris. Etiam tempus 
 94 | 	condimentum felis, nec pretium nisi porta eu. Nam vitae velit enim. 
 95 | 	Aliquam quis magna eros. Morbi sit amet velit lectus, nec euismod 
 96 | 	mauris. Nam faucibus tortor porta tortor interdum non tristique erat 
 97 | 	semper.</p>
 98 | 		<p>Sed elit tellus, malesuada mattis mattis ac, hendrerit at metus. 
 99 | 	Maecenas lobortis, dolor non tincidunt auctor, diam lacus aliquam purus,
100 | 	 nec dapibus velit elit id tortor. Cras massa dolor, tempor ac viverra 
101 | 	ac, rhoncus in nibh. Maecenas pellentesque elit ac mi cursus suscipit. 
102 | 	Morbi eleifend lacus ut est auctor ac molestie eros venenatis. Aenean 
103 | 	dignissim, massa ultricies venenatis pulvinar, velit tortor sodales 
104 | 	urna, in molestie erat libero vitae arcu. Phasellus enim nunc, dictum ac
105 | 	 volutpat at, eleifend tristique eros. Nunc eu libero felis, sit amet 
106 | 	pellentesque tortor. Cras in massa augue. Ut varius, velit blandit 
107 | 	laoreet malesuada, tortor mauris accumsan elit, a interdum libero lectus
108 | 	 sed mauris. Donec vitae sem a elit ultricies dictum. Donec elementum 
109 | 	sagittis orci nec hendrerit. Cras convallis volutpat orci, quis iaculis 
110 | 	justo hendrerit vel. Mauris ornare bibendum eros id placerat.</p>
111 | 		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
112 | 	 fames ac turpis egestas. Cras ac cursus orci. Nullam fermentum congue 
113 | 	ante at dignissim. Duis rhoncus sollicitudin erat, ut eleifend magna 
114 | 	ullamcorper ac. Fusce vitae commodo erat. Duis elementum risus ac lacus 
115 | 	gravida posuere. Aliquam eu eros dui, quis fermentum magna. Vestibulum 
116 | 	in arcu tortor, iaculis consectetur nisl. Vestibulum felis erat, 
117 | 	molestie in congue id, sagittis nec ipsum. Class aptent taciti sociosqu 
118 | 	ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam 
119 | 	mollis tristique libero a mattis. Ut a pellentesque risus.</p>
120 | 		<p>Cras consectetur est sit amet nulla auctor facilisis. Vivamus 
121 | 	pretium bibendum viverra. Curabitur congue quam et felis consectetur a 
122 | 	adipiscing libero elementum. Vestibulum ante ipsum primis in faucibus 
123 | 	orci luctus et ultrices posuere cubilia Curae; Quisque lobortis, dui 
124 | 	vestibulum dapibus placerat, tortor risus viverra mauris, et molestie 
125 | 	ipsum nunc ut erat. Mauris mollis, massa ac consectetur facilisis, nulla
126 | 	 lacus gravida arcu, vel adipiscing leo diam auctor enim. Morbi iaculis 
127 | 	scelerisque nulla. Vestibulum vitae velit ante. Cum sociis natoque 
128 | 	penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
129 | 	Maecenas varius eleifend commodo. Donec eu nulla risus, vel scelerisque 
130 | 	ante. Proin a purus nibh, eu adipiscing erat. Ut vestibulum enim eget mi
131 | 	 dictum aliquet. Cras consectetur, augue a blandit rutrum, arcu est 
132 | 	venenatis velit, non vulputate ligula arcu quis ante. Praesent lectus 
133 | 	mauris, consequat sit amet feugiat vitae, commodo sit amet sem.</p>
134 | 		<p>Pellentesque molestie tincidunt leo, eu blandit mauris iaculis 
135 | 	vitae. Donec sed convallis felis. Curabitur fringilla consectetur augue 
136 | 	id viverra. Integer fringilla est et arcu tincidunt bibendum facilisis 
137 | 	lectus ullamcorper. Suspendisse et nisi sed enim ullamcorper rutrum. Nam
138 | 	 leo erat, ultricies in fringilla a, condimentum a ipsum. Proin nunc 
139 | 	metus, tincidunt quis sagittis ut, vulputate at odio. Nulla pellentesque
140 | 	 vulputate lectus, quis scelerisque nisi rutrum porta. Nam blandit 
141 | 	tristique nisi. Donec placerat tristique nibh, ac placerat erat bibendum
142 | 	 in. Mauris posuere, ipsum vel eleifend blandit, neque arcu cursus 
143 | 	velit, ut faucibus nisl velit quis magna. Aliquam vulputate, mi ac 
144 | 	pulvinar tempus, elit urna eleifend dolor, iaculis auctor nibh elit ac 
145 | 	sem. Nam volutpat erat vel neque pulvinar commodo ac sed erat. Nam sed 
146 | 	erat eu risus facilisis viverra a vel lectus. Curabitur consectetur nunc
147 | 	 accumsan ligula aliquam ut ullamcorper arcu molestie.</p>
148 | 		<p>Cras a augue massa. Praesent feugiat aliquam justo, ut gravida quam 
149 | 	feugiat tristique. Suspendisse potenti. Aliquam erat volutpat. Sed 
150 | 	sollicitudin sodales magna, sed rhoncus dui lacinia vel. Phasellus in 
151 | 	nisi dui. Morbi condimentum, eros eget faucibus commodo, libero nulla 
152 | 	tristique lacus, a varius ligula diam sagittis mauris. Suspendisse 
153 | 	ultrices, sem et iaculis semper, magna erat porttitor nunc, vel rutrum 
154 | 	nunc sapien eu nisl. Suspendisse egestas ullamcorper cursus. Nam 
155 | 	scelerisque adipiscing accumsan. In hac habitasse platea dictumst. Ut 
156 | 	aliquet nisi in elit fermentum rutrum. Curabitur sem leo, feugiat vel 
157 | 	euismod eu, adipiscing sit amet sem. Quisque tempus sapien vulputate 
158 | 	magna vulputate bibendum ullamcorper est congue. Aenean vitae nulla a 
159 | 	lorem rutrum bibendum sit amet id mauris. Pellentesque habitant morbi 
160 | 	tristique senectus et netus et malesuada fames ac turpis egestas. Duis a
161 | 	 risus ac ligula pulvinar placerat nec ac felis. Quisque a massa elit, 
162 | 	vel ornare felis. Quisque placerat, dui vel tristique facilisis, sem 
163 | 	lectus tincidunt neque, ac iaculis lectus leo id felis.</p>
164 | 		<p>Vestibulum sed felis diam. Vivamus ac mi semper massa tincidunt 
165 | 	placerat. Phasellus consectetur, augue nec faucibus lobortis, diam 
166 | 	ligula pharetra nisi, ut consequat magna leo porta mauris. Nunc vitae 
167 | 	dolor nisi. Sed at neque nec arcu eleifend suscipit. Fusce pellentesque 
168 | 	purus ullamcorper orci scelerisque adipiscing. Curabitur placerat mi 
169 | 	eget tortor hendrerit vehicula in sit amet eros. Vestibulum ante ipsum 
170 | 	primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin 
171 | 	nec justo ac dolor dignissim pulvinar feugiat in sapien. Suspendisse 
172 | 	tincidunt tristique risus, sed faucibus arcu sagittis eu. Nulla et 
173 | 	dignissim tortor. Suspendisse dictum ornare velit, at viverra mi 
174 | 	condimentum a.</p>
175 | 		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit 
176 | 	amet nulla sem, nec consectetur velit. Aliquam tempus, nisl sed 
177 | 	fringilla rutrum, tellus risus molestie nisl, nec molestie nunc tellus 
178 | 	vitae urna. Sed ornare mollis metus ac eleifend. Nulla at purus leo. 
179 | 	Vivamus egestas lorem vitae risus interdum vitae vehicula libero 
180 | 	aliquam. Vestibulum cursus est vel tellus consectetur rutrum condimentum
181 | 	 magna euismod. In venenatis dapibus dui, non laoreet tellus consectetur
182 | 	 id. Fusce ut ornare turpis. Suspendisse in leo quis massa auctor 
183 | 	laoreet ut eu lacus. Fusce cursus gravida sapien, non tincidunt risus 
184 | 	convallis vel. Curabitur massa lorem, placerat quis ultrices at, 
185 | 	volutpat scelerisque lorem. Praesent ut nibh nec felis facilisis 
186 | 	fringilla. Etiam ullamcorper varius scelerisque. Suspendisse massa elit,
187 | 	 eleifend at ultricies semper, fringilla eu velit. In aliquam vulputate 
188 | 	sapien, rhoncus mattis nisl porta eu. In dui eros, luctus non faucibus 
189 | 	at, placerat pellentesque justo. In quis lacus interdum magna rhoncus 
190 | 	mollis non et nunc. Vivamus convallis tempor porttitor.</p>
191 | 		<p>Quisque rhoncus volutpat semper. Mauris in venenatis neque. Ut 
192 | 	sodales hendrerit augue vel feugiat. Fusce ante sapien, sodales et 
193 | 	porttitor et, malesuada vitae augue. Suspendisse varius, quam in tempus 
194 | 	aliquet, neque dolor ultricies libero, et tristique dolor nulla a justo.
195 | 	 Nunc sit amet purus felis, id hendrerit quam. Vestibulum semper 
196 | 	vulputate arcu ut gravida. Praesent et nisi nec lectus elementum porta. 
197 | 	Nunc pulvinar mi at justo vulputate bibendum. Nunc dictum, nisi ac 
198 | 	auctor volutpat, quam risus fringilla elit, in iaculis tortor felis et 
199 | 	nulla. Pellentesque lacinia nisl at velit suscipit at adipiscing ligula 
200 | 	gravida. Nam eu dolor ante, sit amet blandit ipsum. Donec quis enim 
201 | 	ligula. Mauris auctor nibh non elit sollicitudin consequat. Phasellus 
202 | 	semper sem et dui lobortis faucibus.</p>
203 | 		<p>Sed dolor massa, placerat eget vehicula vel, pharetra vel leo. 
204 | 	Suspendisse facilisis fermentum vulputate. Nulla eu pharetra diam. 
205 | 	Aliquam tincidunt nunc sed diam congue a mollis nibh fringilla. Aliquam 
206 | 	dictum enim vitae nulla pharetra molestie. Sed mollis, lacus porttitor 
207 | 	ullamcorper pretium, dolor felis tempor elit, et tincidunt orci erat 
208 | 	vitae felis. Maecenas pharetra accumsan sapien non auctor. Curabitur non
209 | 	 risus at lacus egestas facilisis scelerisque gravida tortor. Duis 
210 | 	lacinia dapibus arcu ac molestie. Proin magna neque, posuere ultricies 
211 | 	fringilla sit amet, consectetur vel nibh. Nam quis augue eros, ac mollis
212 | 	 neque. Fusce tincidunt vehicula auctor.</p>
213 | 		<p>Morbi vel sapien arcu, a lobortis mauris. Phasellus placerat turpis 
214 | 	at velit pretium adipiscing. Nullam viverra pretium odio in eleifend. 
215 | 	Nullam et eleifend sem. Sed massa ante, sollicitudin a lacinia ut, 
216 | 	eleifend sed sem. Sed quis lectus purus. Phasellus iaculis lectus et 
217 | 	eros dictum id auctor elit porttitor. In volutpat, felis rutrum blandit 
218 | 	fringilla, velit lacus imperdiet dui, nec pharetra lacus lorem ac 
219 | 	sapien. Duis imperdiet, leo et adipiscing vestibulum, orci felis 
220 | 	vulputate nunc, eu laoreet purus ipsum at lorem. Donec quis leo enim. 
221 | 	Vivamus hendrerit elit purus, in laoreet mauris. Etiam tempus 
222 | 	condimentum felis, nec pretium nisi porta eu. Nam vitae velit enim. 
223 | 	Aliquam quis magna eros. Morbi sit amet velit lectus, nec euismod 
224 | 	mauris. Nam faucibus tortor porta tortor interdum non tristique erat 
225 | 	semper.</p>
226 | 		<p>Sed elit tellus, malesuada mattis mattis ac, hendrerit at metus. 
227 | 	Maecenas lobortis, dolor non tincidunt auctor, diam lacus aliquam purus,
228 | 	 nec dapibus velit elit id tortor. Cras massa dolor, tempor ac viverra 
229 | 	ac, rhoncus in nibh. Maecenas pellentesque elit ac mi cursus suscipit. 
230 | 	Morbi eleifend lacus ut est auctor ac molestie eros venenatis. Aenean 
231 | 	dignissim, massa ultricies venenatis pulvinar, velit tortor sodales 
232 | 	urna, in molestie erat libero vitae arcu. Phasellus enim nunc, dictum ac
233 | 	 volutpat at, eleifend tristique eros. Nunc eu libero felis, sit amet 
234 | 	pellentesque tortor. Cras in massa augue. Ut varius, velit blandit 
235 | 	laoreet malesuada, tortor mauris accumsan elit, a interdum libero lectus
236 | 	 sed mauris. Donec vitae sem a elit ultricies dictum. Donec elementum 
237 | 	sagittis orci nec hendrerit. Cras convallis volutpat orci, quis iaculis 
238 | 	justo hendrerit vel. Mauris ornare bibendum eros id placerat.</p>
239 | 		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
240 | 	 fames ac turpis egestas. Cras ac cursus orci. Nullam fermentum congue 
241 | 	ante at dignissim. Duis rhoncus sollicitudin erat, ut eleifend magna 
242 | 	ullamcorper ac. Fusce vitae commodo erat. Duis elementum risus ac lacus 
243 | 	gravida posuere. Aliquam eu eros dui, quis fermentum magna. Vestibulum 
244 | 	in arcu tortor, iaculis consectetur nisl. Vestibulum felis erat, 
245 | 	molestie in congue id, sagittis nec ipsum. Class aptent taciti sociosqu 
246 | 	ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam 
247 | 	mollis tristique libero a mattis. Ut a pellentesque risus.</p>
248 | 		<p>Cras consectetur est sit amet nulla auctor facilisis. Vivamus 
249 | 	pretium bibendum viverra. Curabitur congue quam et felis consectetur a 
250 | 	adipiscing libero elementum. Vestibulum ante ipsum primis in faucibus 
251 | 	orci luctus et ultrices posuere cubilia Curae; Quisque lobortis, dui 
252 | 	vestibulum dapibus placerat, tortor risus viverra mauris, et molestie 
253 | 	ipsum nunc ut erat. Mauris mollis, massa ac consectetur facilisis, nulla
254 | 	 lacus gravida arcu, vel adipiscing leo diam auctor enim. Morbi iaculis 
255 | 	scelerisque nulla. Vestibulum vitae velit ante. Cum sociis natoque 
256 | 	penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
257 | 	Maecenas varius eleifend commodo. Donec eu nulla risus, vel scelerisque 
258 | 	ante. Proin a purus nibh, eu adipiscing erat. Ut vestibulum enim eget mi
259 | 	 dictum aliquet. Cras consectetur, augue a blandit rutrum, arcu est 
260 | 	venenatis velit, non vulputate ligula arcu quis ante. Praesent lectus 
261 | 	mauris, consequat sit amet feugiat vitae, commodo sit amet sem.</p>
262 | 		<p>Pellentesque molestie tincidunt leo, eu blandit mauris iaculis 
263 | 	vitae. Donec sed convallis felis. Curabitur fringilla consectetur augue 
264 | 	id viverra. Integer fringilla est et arcu tincidunt bibendum facilisis 
265 | 	lectus ullamcorper. Suspendisse et nisi sed enim ullamcorper rutrum. Nam
266 | 	 leo erat, ultricies in fringilla a, condimentum a ipsum. Proin nunc 
267 | 	metus, tincidunt quis sagittis ut, vulputate at odio. Nulla pellentesque
268 | 	 vulputate lectus, quis scelerisque nisi rutrum porta. Nam blandit 
269 | 	tristique nisi. Donec placerat tristique nibh, ac placerat erat bibendum
270 | 	 in. Mauris posuere, ipsum vel eleifend blandit, neque arcu cursus 
271 | 	velit, ut faucibus nisl velit quis magna. Aliquam vulputate, mi ac 
272 | 	pulvinar tempus, elit urna eleifend dolor, iaculis auctor nibh elit ac 
273 | 	sem. Nam volutpat erat vel neque pulvinar commodo ac sed erat. Nam sed 
274 | 	erat eu risus facilisis viverra a vel lectus. Curabitur consectetur nunc
275 | 	 accumsan ligula aliquam ut ullamcorper arcu molestie.</p>
276 | 		<p>Cras a augue massa. Praesent feugiat aliquam justo, ut gravida quam 
277 | 	feugiat tristique. Suspendisse potenti. Aliquam erat volutpat. Sed 
278 | 	sollicitudin sodales magna, sed rhoncus dui lacinia vel. Phasellus in 
279 | 	nisi dui. Morbi condimentum, eros eget faucibus commodo, libero nulla 
280 | 	tristique lacus, a varius ligula diam sagittis mauris. Suspendisse 
281 | 	ultrices, sem et iaculis semper, magna erat porttitor nunc, vel rutrum 
282 | 	nunc sapien eu nisl. Suspendisse egestas ullamcorper cursus. Nam 
283 | 	scelerisque adipiscing accumsan. In hac habitasse platea dictumst. Ut 
284 | 	aliquet nisi in elit fermentum rutrum. Curabitur sem leo, feugiat vel 
285 | 	euismod eu, adipiscing sit amet sem. Quisque tempus sapien vulputate 
286 | 	magna vulputate bibendum ullamcorper est congue. Aenean vitae nulla a 
287 | 	lorem rutrum bibendum sit amet id mauris. Pellentesque habitant morbi 
288 | 	tristique senectus et netus et malesuada fames ac turpis egestas. Duis a
289 | 	 risus ac ligula pulvinar placerat nec ac felis. Quisque a massa elit, 
290 | 	vel ornare felis. Quisque placerat, dui vel tristique facilisis, sem 
291 | 	lectus tincidunt neque, ac iaculis lectus leo id felis.</p>
292 | 		<p>Vestibulum sed felis diam. Vivamus ac mi semper massa tincidunt 
293 | 	placerat. Phasellus consectetur, augue nec faucibus lobortis, diam 
294 | 	ligula pharetra nisi, ut consequat magna leo porta mauris. Nunc vitae 
295 | 	dolor nisi. Sed at neque nec arcu eleifend suscipit. Fusce pellentesque 
296 | 	purus ullamcorper orci scelerisque adipiscing. Curabitur placerat mi 
297 | 	eget tortor hendrerit vehicula in sit amet eros. Vestibulum ante ipsum 
298 | 	primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin 
299 | 	nec justo ac dolor dignissim pulvinar feugiat in sapien. Suspendisse 
300 | 	tincidunt tristique risus, sed faucibus arcu sagittis eu. Nulla et 
301 | 	dignissim tortor. Suspendisse dictum ornare velit, at viverra mi 
302 | 	condimentum a.</p>
303 | 	</div>
304 | 
305 | 	<div class="scroll">
306 | 		<h2>Scroll Element A</h2>
307 | 		Scroll down/up to see me smoothly reposition myself and keep in view.<br><br>
308 | 		jScroll by William Duffy<br />
309 | 		<a href="http://www.wduffy.co.uk/">www.wduffy.co.uk</a>
310 | 	</div>
311 | 
312 | 	<div class="clear"><!-- clear --></div>
313 | </div>
314 | 
315 | <div class="container">
316 | 	<div class="text">
317 | 		<h1>Scroll Container B</h1>
318 | 		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit 
319 | 	amet nulla sem, nec consectetur velit. Aliquam tempus, nisl sed 
320 | 	fringilla rutrum, tellus risus molestie nisl, nec molestie nunc tellus 
321 | 	vitae urna. Sed ornare mollis metus ac eleifend. Nulla at purus leo. 
322 | 	Vivamus egestas lorem vitae risus interdum vitae vehicula libero 
323 | 	aliquam. Vestibulum cursus est vel tellus consectetur rutrum condimentum
324 | 	 magna euismod. In venenatis dapibus dui, non laoreet tellus consectetur
325 | 	 id. Fusce ut ornare turpis. Suspendisse in leo quis massa auctor 
326 | 	laoreet ut eu lacus. Fusce cursus gravida sapien, non tincidunt risus 
327 | 	convallis vel. Curabitur massa lorem, placerat quis ultrices at, 
328 | 	volutpat scelerisque lorem. Praesent ut nibh nec felis facilisis 
329 | 	fringilla. Etiam ullamcorper varius scelerisque. Suspendisse massa elit,
330 | 	 eleifend at ultricies semper, fringilla eu velit. In aliquam vulputate 
331 | 	sapien, rhoncus mattis nisl porta eu. In dui eros, luctus non faucibus 
332 | 	at, placerat pellentesque justo. In quis lacus interdum magna rhoncus 
333 | 	mollis non et nunc. Vivamus convallis tempor porttitor.</p>
334 | 		<p>Quisque rhoncus volutpat semper. Mauris in venenatis neque. Ut 
335 | 	sodales hendrerit augue vel feugiat. Fusce ante sapien, sodales et 
336 | 	porttitor et, malesuada vitae augue. Suspendisse varius, quam in tempus 
337 | 	aliquet, neque dolor ultricies libero, et tristique dolor nulla a justo.
338 | 	 Nunc sit amet purus felis, id hendrerit quam. Vestibulum semper 
339 | 	vulputate arcu ut gravida. Praesent et nisi nec lectus elementum porta. 
340 | 	Nunc pulvinar mi at justo vulputate bibendum. Nunc dictum, nisi ac 
341 | 	auctor volutpat, quam risus fringilla elit, in iaculis tortor felis et 
342 | 	nulla. Pellentesque lacinia nisl at velit suscipit at adipiscing ligula 
343 | 	gravida. Nam eu dolor ante, sit amet blandit ipsum. Donec quis enim 
344 | 	ligula. Mauris auctor nibh non elit sollicitudin consequat. Phasellus 
345 | 	semper sem et dui lobortis faucibus.</p>
346 | 		<p>Sed dolor massa, placerat eget vehicula vel, pharetra vel leo. 
347 | 	Suspendisse facilisis fermentum vulputate. Nulla eu pharetra diam. 
348 | 	Aliquam tincidunt nunc sed diam congue a mollis nibh fringilla. Aliquam 
349 | 	dictum enim vitae nulla pharetra molestie. Sed mollis, lacus porttitor 
350 | 	ullamcorper pretium, dolor felis tempor elit, et tincidunt orci erat 
351 | 	vitae felis. Maecenas pharetra accumsan sapien non auctor. Curabitur non
352 | 	 risus at lacus egestas facilisis scelerisque gravida tortor. Duis 
353 | 	lacinia dapibus arcu ac molestie. Proin magna neque, posuere ultricies 
354 | 	fringilla sit amet, consectetur vel nibh. Nam quis augue eros, ac mollis
355 | 	 neque. Fusce tincidunt vehicula auctor.</p>
356 | 		<p>Morbi vel sapien arcu, a lobortis mauris. Phasellus placerat turpis 
357 | 	at velit pretium adipiscing. Nullam viverra pretium odio in eleifend. 
358 | 	Nullam et eleifend sem. Sed massa ante, sollicitudin a lacinia ut, 
359 | 	eleifend sed sem. Sed quis lectus purus. Phasellus iaculis lectus et 
360 | 	eros dictum id auctor elit porttitor. In volutpat, felis rutrum blandit 
361 | 	fringilla, velit lacus imperdiet dui, nec pharetra lacus lorem ac 
362 | 	sapien. Duis imperdiet, leo et adipiscing vestibulum, orci felis 
363 | 	vulputate nunc, eu laoreet purus ipsum at lorem. Donec quis leo enim. 
364 | 	Vivamus hendrerit elit purus, in laoreet mauris. Etiam tempus 
365 | 	condimentum felis, nec pretium nisi porta eu. Nam vitae velit enim. 
366 | 	Aliquam quis magna eros. Morbi sit amet velit lectus, nec euismod 
367 | 	mauris. Nam faucibus tortor porta tortor interdum non tristique erat 
368 | 	semper.</p>
369 | 		<p>Sed elit tellus, malesuada mattis mattis ac, hendrerit at metus. 
370 | 	Maecenas lobortis, dolor non tincidunt auctor, diam lacus aliquam purus,
371 | 	 nec dapibus velit elit id tortor. Cras massa dolor, tempor ac viverra 
372 | 	ac, rhoncus in nibh. Maecenas pellentesque elit ac mi cursus suscipit. 
373 | 	Morbi eleifend lacus ut est auctor ac molestie eros venenatis. Aenean 
374 | 	dignissim, massa ultricies venenatis pulvinar, velit tortor sodales 
375 | 	urna, in molestie erat libero vitae arcu. Phasellus enim nunc, dictum ac
376 | 	 volutpat at, eleifend tristique eros. Nunc eu libero felis, sit amet 
377 | 	pellentesque tortor. Cras in massa augue. Ut varius, velit blandit 
378 | 	laoreet malesuada, tortor mauris accumsan elit, a interdum libero lectus
379 | 	 sed mauris. Donec vitae sem a elit ultricies dictum. Donec elementum 
380 | 	sagittis orci nec hendrerit. Cras convallis volutpat orci, quis iaculis 
381 | 	justo hendrerit vel. Mauris ornare bibendum eros id placerat.</p>
382 | 		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
383 | 	 fames ac turpis egestas. Cras ac cursus orci. Nullam fermentum congue 
384 | 	ante at dignissim. Duis rhoncus sollicitudin erat, ut eleifend magna 
385 | 	ullamcorper ac. Fusce vitae commodo erat. Duis elementum risus ac lacus 
386 | 	gravida posuere. Aliquam eu eros dui, quis fermentum magna. Vestibulum 
387 | 	in arcu tortor, iaculis consectetur nisl. Vestibulum felis erat, 
388 | 	molestie in congue id, sagittis nec ipsum. Class aptent taciti sociosqu 
389 | 	ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam 
390 | 	mollis tristique libero a mattis. Ut a pellentesque risus.</p>
391 | 		<p>Cras consectetur est sit amet nulla auctor facilisis. Vivamus 
392 | 	pretium bibendum viverra. Curabitur congue quam et felis consectetur a 
393 | 	adipiscing libero elementum. Vestibulum ante ipsum primis in faucibus 
394 | 	orci luctus et ultrices posuere cubilia Curae; Quisque lobortis, dui 
395 | 	vestibulum dapibus placerat, tortor risus viverra mauris, et molestie 
396 | 	ipsum nunc ut erat. Mauris mollis, massa ac consectetur facilisis, nulla
397 | 	 lacus gravida arcu, vel adipiscing leo diam auctor enim. Morbi iaculis 
398 | 	scelerisque nulla. Vestibulum vitae velit ante. Cum sociis natoque 
399 | 	penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
400 | 	Maecenas varius eleifend commodo. Donec eu nulla risus, vel scelerisque 
401 | 	ante. Proin a purus nibh, eu adipiscing erat. Ut vestibulum enim eget mi
402 | 	 dictum aliquet. Cras consectetur, augue a blandit rutrum, arcu est 
403 | 	venenatis velit, non vulputate ligula arcu quis ante. Praesent lectus 
404 | 	mauris, consequat sit amet feugiat vitae, commodo sit amet sem.</p>
405 | 		<p>Pellentesque molestie tincidunt leo, eu blandit mauris iaculis 
406 | 	vitae. Donec sed convallis felis. Curabitur fringilla consectetur augue 
407 | 	id viverra. Integer fringilla est et arcu tincidunt bibendum facilisis 
408 | 	lectus ullamcorper. Suspendisse et nisi sed enim ullamcorper rutrum. Nam
409 | 	 leo erat, ultricies in fringilla a, condimentum a ipsum. Proin nunc 
410 | 	metus, tincidunt quis sagittis ut, vulputate at odio. Nulla pellentesque
411 | 	 vulputate lectus, quis scelerisque nisi rutrum porta. Nam blandit 
412 | 	tristique nisi. Donec placerat tristique nibh, ac placerat erat bibendum
413 | 	 in. Mauris posuere, ipsum vel eleifend blandit, neque arcu cursus 
414 | 	velit, ut faucibus nisl velit quis magna. Aliquam vulputate, mi ac 
415 | 	pulvinar tempus, elit urna eleifend dolor, iaculis auctor nibh elit ac 
416 | 	sem. Nam volutpat erat vel neque pulvinar commodo ac sed erat. Nam sed 
417 | 	erat eu risus facilisis viverra a vel lectus. Curabitur consectetur nunc
418 | 	 accumsan ligula aliquam ut ullamcorper arcu molestie.</p>
419 | 		<p>Cras a augue massa. Praesent feugiat aliquam justo, ut gravida quam 
420 | 	feugiat tristique. Suspendisse potenti. Aliquam erat volutpat. Sed 
421 | 	sollicitudin sodales magna, sed rhoncus dui lacinia vel. Phasellus in 
422 | 	nisi dui. Morbi condimentum, eros eget faucibus commodo, libero nulla 
423 | 	tristique lacus, a varius ligula diam sagittis mauris. Suspendisse 
424 | 	ultrices, sem et iaculis semper, magna erat porttitor nunc, vel rutrum 
425 | 	nunc sapien eu nisl. Suspendisse egestas ullamcorper cursus. Nam 
426 | 	scelerisque adipiscing accumsan. In hac habitasse platea dictumst. Ut 
427 | 	aliquet nisi in elit fermentum rutrum. Curabitur sem leo, feugiat vel 
428 | 	euismod eu, adipiscing sit amet sem. Quisque tempus sapien vulputate 
429 | 	magna vulputate bibendum ullamcorper est congue. Aenean vitae nulla a 
430 | 	lorem rutrum bibendum sit amet id mauris. Pellentesque habitant morbi 
431 | 	tristique senectus et netus et malesuada fames ac turpis egestas. Duis a
432 | 	 risus ac ligula pulvinar placerat nec ac felis. Quisque a massa elit, 
433 | 	vel ornare felis. Quisque placerat, dui vel tristique facilisis, sem 
434 | 	lectus tincidunt neque, ac iaculis lectus leo id felis.</p>
435 | 		<p>Vestibulum sed felis diam. Vivamus ac mi semper massa tincidunt 
436 | 	placerat. Phasellus consectetur, augue nec faucibus lobortis, diam 
437 | 	ligula pharetra nisi, ut consequat magna leo porta mauris. Nunc vitae 
438 | 	dolor nisi. Sed at neque nec arcu eleifend suscipit. Fusce pellentesque 
439 | 	purus ullamcorper orci scelerisque adipiscing. Curabitur placerat mi 
440 | 	eget tortor hendrerit vehicula in sit amet eros. Vestibulum ante ipsum 
441 | 	primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin 
442 | 	nec justo ac dolor dignissim pulvinar feugiat in sapien. Suspendisse 
443 | 	tincidunt tristique risus, sed faucibus arcu sagittis eu. Nulla et 
444 | 	dignissim tortor. Suspendisse dictum ornare velit, at viverra mi 
445 | 	condimentum a.</p>
446 | 		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit 
447 | 	amet nulla sem, nec consectetur velit. Aliquam tempus, nisl sed 
448 | 	fringilla rutrum, tellus risus molestie nisl, nec molestie nunc tellus 
449 | 	vitae urna. Sed ornare mollis metus ac eleifend. Nulla at purus leo. 
450 | 	Vivamus egestas lorem vitae risus interdum vitae vehicula libero 
451 | 	aliquam. Vestibulum cursus est vel tellus consectetur rutrum condimentum
452 | 	 magna euismod. In venenatis dapibus dui, non laoreet tellus consectetur
453 | 	 id. Fusce ut ornare turpis. Suspendisse in leo quis massa auctor 
454 | 	laoreet ut eu lacus. Fusce cursus gravida sapien, non tincidunt risus 
455 | 	convallis vel. Curabitur massa lorem, placerat quis ultrices at, 
456 | 	volutpat scelerisque lorem. Praesent ut nibh nec felis facilisis 
457 | 	fringilla. Etiam ullamcorper varius scelerisque. Suspendisse massa elit,
458 | 	 eleifend at ultricies semper, fringilla eu velit. In aliquam vulputate 
459 | 	sapien, rhoncus mattis nisl porta eu. In dui eros, luctus non faucibus 
460 | 	at, placerat pellentesque justo. In quis lacus interdum magna rhoncus 
461 | 	mollis non et nunc. Vivamus convallis tempor porttitor.</p>
462 | 		<p>Quisque rhoncus volutpat semper. Mauris in venenatis neque. Ut 
463 | 	sodales hendrerit augue vel feugiat. Fusce ante sapien, sodales et 
464 | 	porttitor et, malesuada vitae augue. Suspendisse varius, quam in tempus 
465 | 	aliquet, neque dolor ultricies libero, et tristique dolor nulla a justo.
466 | 	 Nunc sit amet purus felis, id hendrerit quam. Vestibulum semper 
467 | 	vulputate arcu ut gravida. Praesent et nisi nec lectus elementum porta. 
468 | 	Nunc pulvinar mi at justo vulputate bibendum. Nunc dictum, nisi ac 
469 | 	auctor volutpat, quam risus fringilla elit, in iaculis tortor felis et 
470 | 	nulla. Pellentesque lacinia nisl at velit suscipit at adipiscing ligula 
471 | 	gravida. Nam eu dolor ante, sit amet blandit ipsum. Donec quis enim 
472 | 	ligula. Mauris auctor nibh non elit sollicitudin consequat. Phasellus 
473 | 	semper sem et dui lobortis faucibus.</p>
474 | 		<p>Sed dolor massa, placerat eget vehicula vel, pharetra vel leo. 
475 | 	Suspendisse facilisis fermentum vulputate. Nulla eu pharetra diam. 
476 | 	Aliquam tincidunt nunc sed diam congue a mollis nibh fringilla. Aliquam 
477 | 	dictum enim vitae nulla pharetra molestie. Sed mollis, lacus porttitor 
478 | 	ullamcorper pretium, dolor felis tempor elit, et tincidunt orci erat 
479 | 	vitae felis. Maecenas pharetra accumsan sapien non auctor. Curabitur non
480 | 	 risus at lacus egestas facilisis scelerisque gravida tortor. Duis 
481 | 	lacinia dapibus arcu ac molestie. Proin magna neque, posuere ultricies 
482 | 	fringilla sit amet, consectetur vel nibh. Nam quis augue eros, ac mollis
483 | 	 neque. Fusce tincidunt vehicula auctor.</p>
484 | 		<p>Morbi vel sapien arcu, a lobortis mauris. Phasellus placerat turpis 
485 | 	at velit pretium adipiscing. Nullam viverra pretium odio in eleifend. 
486 | 	Nullam et eleifend sem. Sed massa ante, sollicitudin a lacinia ut, 
487 | 	eleifend sed sem. Sed quis lectus purus. Phasellus iaculis lectus et 
488 | 	eros dictum id auctor elit porttitor. In volutpat, felis rutrum blandit 
489 | 	fringilla, velit lacus imperdiet dui, nec pharetra lacus lorem ac 
490 | 	sapien. Duis imperdiet, leo et adipiscing vestibulum, orci felis 
491 | 	vulputate nunc, eu laoreet purus ipsum at lorem. Donec quis leo enim. 
492 | 	Vivamus hendrerit elit purus, in laoreet mauris. Etiam tempus 
493 | 	condimentum felis, nec pretium nisi porta eu. Nam vitae velit enim. 
494 | 	Aliquam quis magna eros. Morbi sit amet velit lectus, nec euismod 
495 | 	mauris. Nam faucibus tortor porta tortor interdum non tristique erat 
496 | 	semper.</p>
497 | 		<p>Sed elit tellus, malesuada mattis mattis ac, hendrerit at metus. 
498 | 	Maecenas lobortis, dolor non tincidunt auctor, diam lacus aliquam purus,
499 | 	 nec dapibus velit elit id tortor. Cras massa dolor, tempor ac viverra 
500 | 	ac, rhoncus in nibh. Maecenas pellentesque elit ac mi cursus suscipit. 
501 | 	Morbi eleifend lacus ut est auctor ac molestie eros venenatis. Aenean 
502 | 	dignissim, massa ultricies venenatis pulvinar, velit tortor sodales 
503 | 	urna, in molestie erat libero vitae arcu. Phasellus enim nunc, dictum ac
504 | 	 volutpat at, eleifend tristique eros. Nunc eu libero felis, sit amet 
505 | 	pellentesque tortor. Cras in massa augue. Ut varius, velit blandit 
506 | 	laoreet malesuada, tortor mauris accumsan elit, a interdum libero lectus
507 | 	 sed mauris. Donec vitae sem a elit ultricies dictum. Donec elementum 
508 | 	sagittis orci nec hendrerit. Cras convallis volutpat orci, quis iaculis 
509 | 	justo hendrerit vel. Mauris ornare bibendum eros id placerat.</p>
510 | 		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
511 | 	 fames ac turpis egestas. Cras ac cursus orci. Nullam fermentum congue 
512 | 	ante at dignissim. Duis rhoncus sollicitudin erat, ut eleifend magna 
513 | 	ullamcorper ac. Fusce vitae commodo erat. Duis elementum risus ac lacus 
514 | 	gravida posuere. Aliquam eu eros dui, quis fermentum magna. Vestibulum 
515 | 	in arcu tortor, iaculis consectetur nisl. Vestibulum felis erat, 
516 | 	molestie in congue id, sagittis nec ipsum. Class aptent taciti sociosqu 
517 | 	ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam 
518 | 	mollis tristique libero a mattis. Ut a pellentesque risus.</p>
519 | 		<p>Cras consectetur est sit amet nulla auctor facilisis. Vivamus 
520 | 	pretium bibendum viverra. Curabitur congue quam et felis consectetur a 
521 | 	adipiscing libero elementum. Vestibulum ante ipsum primis in faucibus 
522 | 	orci luctus et ultrices posuere cubilia Curae; Quisque lobortis, dui 
523 | 	vestibulum dapibus placerat, tortor risus viverra mauris, et molestie 
524 | 	ipsum nunc ut erat. Mauris mollis, massa ac consectetur facilisis, nulla
525 | 	 lacus gravida arcu, vel adipiscing leo diam auctor enim. Morbi iaculis 
526 | 	scelerisque nulla. Vestibulum vitae velit ante. Cum sociis natoque 
527 | 	penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
528 | 	Maecenas varius eleifend commodo. Donec eu nulla risus, vel scelerisque 
529 | 	ante. Proin a purus nibh, eu adipiscing erat. Ut vestibulum enim eget mi
530 | 	 dictum aliquet. Cras consectetur, augue a blandit rutrum, arcu est 
531 | 	venenatis velit, non vulputate ligula arcu quis ante. Praesent lectus 
532 | 	mauris, consequat sit amet feugiat vitae, commodo sit amet sem.</p>
533 | 		<p>Pellentesque molestie tincidunt leo, eu blandit mauris iaculis 
534 | 	vitae. Donec sed convallis felis. Curabitur fringilla consectetur augue 
535 | 	id viverra. Integer fringilla est et arcu tincidunt bibendum facilisis 
536 | 	lectus ullamcorper. Suspendisse et nisi sed enim ullamcorper rutrum. Nam
537 | 	 leo erat, ultricies in fringilla a, condimentum a ipsum. Proin nunc 
538 | 	metus, tincidunt quis sagittis ut, vulputate at odio. Nulla pellentesque
539 | 	 vulputate lectus, quis scelerisque nisi rutrum porta. Nam blandit 
540 | 	tristique nisi. Donec placerat tristique nibh, ac placerat erat bibendum
541 | 	 in. Mauris posuere, ipsum vel eleifend blandit, neque arcu cursus 
542 | 	velit, ut faucibus nisl velit quis magna. Aliquam vulputate, mi ac 
543 | 	pulvinar tempus, elit urna eleifend dolor, iaculis auctor nibh elit ac 
544 | 	sem. Nam volutpat erat vel neque pulvinar commodo ac sed erat. Nam sed 
545 | 	erat eu risus facilisis viverra a vel lectus. Curabitur consectetur nunc
546 | 	 accumsan ligula aliquam ut ullamcorper arcu molestie.</p>
547 | 		<p>Cras a augue massa. Praesent feugiat aliquam justo, ut gravida quam 
548 | 	feugiat tristique. Suspendisse potenti. Aliquam erat volutpat. Sed 
549 | 	sollicitudin sodales magna, sed rhoncus dui lacinia vel. Phasellus in 
550 | 	nisi dui. Morbi condimentum, eros eget faucibus commodo, libero nulla 
551 | 	tristique lacus, a varius ligula diam sagittis mauris. Suspendisse 
552 | 	ultrices, sem et iaculis semper, magna erat porttitor nunc, vel rutrum 
553 | 	nunc sapien eu nisl. Suspendisse egestas ullamcorper cursus. Nam 
554 | 	scelerisque adipiscing accumsan. In hac habitasse platea dictumst. Ut 
555 | 	aliquet nisi in elit fermentum rutrum. Curabitur sem leo, feugiat vel 
556 | 	euismod eu, adipiscing sit amet sem. Quisque tempus sapien vulputate 
557 | 	magna vulputate bibendum ullamcorper est congue. Aenean vitae nulla a 
558 | 	lorem rutrum bibendum sit amet id mauris. Pellentesque habitant morbi 
559 | 	tristique senectus et netus et malesuada fames ac turpis egestas. Duis a
560 | 	 risus ac ligula pulvinar placerat nec ac felis. Quisque a massa elit, 
561 | 	vel ornare felis. Quisque placerat, dui vel tristique facilisis, sem 
562 | 	lectus tincidunt neque, ac iaculis lectus leo id felis.</p>
563 | 		<p>Vestibulum sed felis diam. Vivamus ac mi semper massa tincidunt 
564 | 	placerat. Phasellus consectetur, augue nec faucibus lobortis, diam 
565 | 	ligula pharetra nisi, ut consequat magna leo porta mauris. Nunc vitae 
566 | 	dolor nisi. Sed at neque nec arcu eleifend suscipit. Fusce pellentesque 
567 | 	purus ullamcorper orci scelerisque adipiscing. Curabitur placerat mi 
568 | 	eget tortor hendrerit vehicula in sit amet eros. Vestibulum ante ipsum 
569 | 	primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin 
570 | 	nec justo ac dolor dignissim pulvinar feugiat in sapien. Suspendisse 
571 | 	tincidunt tristique risus, sed faucibus arcu sagittis eu. Nulla et 
572 | 	dignissim tortor. Suspendisse dictum ornare velit, at viverra mi 
573 | 	condimentum a.</p>
574 | 	</div>
575 | 
576 | 	<div class="scroll">
577 | 		<h2>Scroll Element B</h2>
578 | 		Scroll down/up to see me smoothly reposition myself and keep in view.<br><br>
579 | 		jScroll by William Duffy<br />
580 | 		<a href="http://www.wduffy.co.uk/">www.wduffy.co.uk</a>
581 | 	</div>
582 | 
583 | 	<div class="clear"><!-- clear --></div>
584 | </div>
585 | 
586 | </body></html>


--------------------------------------------------------------------------------