-
Notifications
You must be signed in to change notification settings - Fork 29
/
index.html
354 lines (289 loc) · 23.1 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollfix演示-前端博客</title>
<meta name="keywords" content="前端博客,代码演示" />
<meta name="description" content="滚动停在底部某个标签的位置-jquery滚动固定插件：scrollfix演示，前端博客代码演示，caibaojian.com，前端代码范例，演示代码" />
<style>
body {
margin: 0px;
min-width: 940px;
text-align: left;
font-size: 14px;
}
body p {
margin-top: 8px;
}
body ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.main {
margin: 0 auto;
width: 900px;
}
.banner {
background-color: #333333;
color: #fefefe;
padding: 20px;
padding-top: 80px;
padding-bottom: 80px;
}
.banner a{color: #fff; text-decoration: none;}
.title {
font-size: 140%;
font-weight: bold;
}
.header {
background-color: #eee;
padding: 20px;
}
.header.scrollfixed {
color: red;
}
.content {
padding: 20px;
overflow: hidden;
}
.footer {
background-color: #eee;
padding: 20px;
clear: both;
}
.footer.scrollfixed {
color: red;
}
.footer-content {
background-color: #aaa;
padding: 20px;
}
.demos li {
margin-bottom: 20px;
}
.left {
float: left;
width: 680px;
}
.right {
float: left;
margin-left: 30px;
}
.summary {
border: 1px solid #dddddd;
overflow: hidden;
margin-top: 20px;
background-color: white;
margin-left: 10px;
zoom:1;
}
.summary .caption {
border-bottom: 1px solid #dddddd;
background-color: #dddddd;
font-size: 12pt;
font-weight: bold;
padding: 5px;
}
.summary.scrollfixed {
margin-top: 0px;
margin-left:0;
}
.summary.scrollfixed .caption {
color: red;
}
.contents {
width: 150px;
margin: 10px;
font-size: 80%;
}
*{margin-bottom: auto;}
</style>
<meta charset="utf-8"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scrollfix.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Dock the header to the top of the window when scrolled past the banner.
// This is the default behavior.
$('.header').scrollFix({zIndex:1000});
// Dock the footer to the bottom of the page, but scroll up to reveal more
// content if the page is scrolled far enough.
$('.footer').scrollFix( {
startTop:'body',
bottom: '0',
endPos : '.footer-content',
zIndex : 999
});
// Dock each summary as it arrives just below the docked header, pushing the
// previous summary up the page.
var summaries = $('.summary');
summaries.each(function(i) {
var summary = $(summaries[i]);
var next = summaries[i + 1];
if(next){
summary.scrollFix({
distanceTop: $(".header").outerHeight() + 10,
endPos: next,
zIndex: 998
});
}else{
summary.scrollFix({
distanceTop: $(".header").outerHeight() + 10,
endPos: '.footer',
zIndex: 998
});
}
});
// $("#summary1").scrollFix({
// distanceTop:$(".header").outerHeight() + 10,
// endPos: '.footer',
// zIndex: 998
// })
});
</script>
</head>
<body>
<ul>
<li class="banner">
<div class="main"><span class="title"><a href="https://qdkfweb.cn">前端博客</a></span><span> - <a href="https://qdkfweb.cn/scrollfix">点击查看插件详细介绍</a>.</span></div>
</li>
<li class="header">
<div class="main"><span class="title">Header</span><span> - This header will dock to the top of the window.</span></div>
</li>
<li class="content main">
<ul>
<li class="left">
<h1><a href="https://qdkfweb.cn/demo/scrollfix/">scrollFix Demo</a></h1>
</li>
<li class="left">
<h2>What?</h2>
<p>This jQuery plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.</p>
<p>Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.</p>
<p>This plugin has been tested in Firefox 3+, Google Chrome 10+, Safari 5+, Internet Explorer 8/9, and Opera 11.60+.</p>
<h2>How?</h2>
<p>You can get the plugin <a href="https://github.com/kujian/scrollfix">here</a>.</p>
<p>The code below fixes the header to the top of the window and the footer to the bottom of the window. The footer will reveal more content once the window is scrolled low enough. Three summary elements on the right follow their respective sections, docking at the top of the window until the next section arrives. Once the footer is undocked, it will push the last summary up the page to reveal its contents.</p>
<pre>
$(document).ready(function() {
// Dock the header to the top of the window when scrolled past the banner.
// This is the default behavior.
$('.header').scrollFix({zIndex:1000});
// Dock the footer to the bottom of the page, but scroll up to reveal more
// content if the page is scrolled far enough.
$('.footer').scrollFix( {
startTop:'body',
bottom: '0',
endPos : '.footer-content',
zIndex : 999
});
// Dock each summary as it arrives just below the docked header, pushing the
// previous summary up the page.
var summaries = $('.summary');
summaries.each(function(i) {
var summary = $(summaries[i]);
var next = summaries[i + 1];
if(next){
summary.scrollFix({
distanceTop: $(".header").outerHeight() + 10,
endPos: next,
zIndex: 998
});
}else{
summary.scrollFix({
distanceTop: $(".header").outerHeight() + 10,
endPos: '.footer',
zIndex: 998
});
}
});
});
</pre>
<p>The rest of this is all Greek to me :)</p>
<p>Orci id gravida per neque nibh. Nullam sit commodo tincidunt et diam vitae pharetra sed. Tempus sit sodales. Voluptatem wisi mattis inceptos tellus dolor rhoncus sed et eu turpis torquent ligula eu dui lorem nec accumsan platea lacinia ac. Non faucibus per sit in vehicula magna lacus deleniti. Tincidunt per aliquam. Vestibulum adipiscing laoreet eget eros commodo. Laoreet molestie a eros in nec sed justo venenatis. Eu lorem gravida. Nisl non a sociis convallis leo. Est nunc nisl porta dignissim turpis. Sapien sed nulla. Amet mi diam. Sem risus accumsan. Posuere viverra convallis. Est at netus. Tortor eget quam. Wisi nulla erat vestibulum tempor eu hendrerit vel dolor. Aliquam magnis sed etiam felis eros.</p>
<h2>Scelerisque in justo neque ultricies vel eget libero quam vitae metus ante nonummy amet augue</h2>
<p>Velit tellus enim. Vitae et ultrices. Odio torquent ligula. Quam in a scelerisque malesuada non. Sem enim congue sed odio libero. Lacinia commodo feugiat sed nonummy lobortis erat maecenas vivamus. Lectus diam pede. Eget risus mauris. In dapibus libero suspendisse pellentesque urna. Id metus libero. Metus id accumsan curabitur id congue. Elementum diam placerat posuere vivamus felis. Arcu ante vestibulum. Orci ut ut magna nibh eu aliquam mi qui vel pretium nullam. Tellus ligula malesuada. Consequat id nulla. Feugiat suscipit ligula dolor amet congue urna etiam amet accumsan consequat distinctio natoque placerat nec. Eget lectus mauris molestie fusce dui. Vel consectetuer imperdiet tempus at sed. Proin aliquam nec. Ligula sit elit eget faucibus cras arcu in rhoncus. Lorem id integer. Vestibulum nec cum. Ligula aliquam tellus elit nisl lectus in diam tortor wisi mauris tempus.</p><p>Fermentum ipsum augue. Lectus in nunc vulputate tellus neque tortor erat cursus. Congue wisi enim. Nam eget dui auctor amet quis donec ipsum nibh. Nisl leo magna officia leo nibh.</p>
</li>
<li class="right">
<ul id="summary1" class="summary">
<li class="caption">Summary 1</li>
<li class="contents">
<p>There are three floating summaries on the right of this page. They are anchored to their respective sections.</p>
<p>Once a summary reaches the bottom of the header above, it will stop there until the next section summary arrives. Then, it will continue up the page.</p>
<p>The last summary will get pushed up the page by the footer once it undocks to reveal the content below it.</p>
</li>
</ul>
</li>
<li class="left">
<h2>Mollis in ornare</h2>
<p>Nec a ut. Ut nullam urna. Quis tortor mauris blandit non corrupti. Rutrum in at id dignissim dictum. Duis ac ornare parturient ultrices amet odio feugiat aenean cras mus pede. Praesent egestas netus. Urna esse pharetra commodi commodo curabitur. A lacinia sed etiam ut vel maxime platea porta odio mollis non nisl nulla nullam. Vitae impedit pulvinar.</p>
<h2>Sem velit maiores</h2>
<p>Accumsan blandit ut. Varius velit ante. Leo tincidunt nulla lorem gravida nulla tempus volutpat donec phasellus aliquet nec. Sapien tempor id pharetra magna mi. Nunc fusce venenatis nam mi nam. Eget senectus convallis donec urna suscipit donec natoque lacinia rutrum lorem est adipiscing sed lectus. Dictumst faucibus ut. Vulputate sodales ipsum. Purus vehicula sed vestibulum eget integer.</p>
<h2>Ut turpis tempor integer fusce bibendum sem ipsum rutrum</h2>
<p>Nec in nibh. A amet condimentum. Commodo fringilla amet sit ut quis. Facilisi ac a ut id morbi. Aut pretium orci donec dui vel risus eros amet quis ut molestiae. Molestie nulla sem vestibulum urna aptent aliquam etiam auctor. Erat eu duis. Imperdiet vestibulum ut. Nibh risus fusce viverra wisi lectus.</p>
<h2>Sed curabitur ut vel condimentum fermentum a felis suspendisse</h2>
<p>Neque lacus lorem ut massa lacinia. Amet nulla est. Vitae in vel turpis diam elit lacinia amet quis. Sem a in. Architecto magna sit vel vehicula elit ullam consectetuer non. Vel vulputate elit facilisis accumsan justo. Ridiculus pharetra fusce. A volutpat curabitur. Senectus amet in elementum ipsum ut sit eros tellus.</p>
<h2>Phasellus enim metus vestibulum scelerisque mauris</h2>
<p>Donec nisl massa. Hendrerit suscipit turpis sed eget quis. Mauris wisi aenean amet semper morbi. Orci hendrerit vestibulum dolor a semper nullam nesciunt amet.</p><p>Erat ac non. Accumsan arcu mauris. Consectetuer vivamus convallis. Vestibulum neque vitae risus vivamus ut. Egestas elit eget. Venenatis mattis orci. Malesuada eget massa vitae est nec lacus et parturient nunc enim curabitur mollis vitae dictumst et malesuada non amet wisi amet sit lacus cras quis accumsan tortor tempore vulputate ante. Corrupti est sem dignissim ante vehicula ac cursus in tempus suspendisse at. Neque pariatur sed. Ac malesuada a. Hac duis pellentesque. Libero varius fugiat. Iaculis aliquam ac eros tempus sit sit in fusce. Luctus wisi amet. Vestibulum est vitae ut libero massa. Eu hendrerit velit. Et per massa congue vivamus sapien. Nibh nibh pulvinar. Libero velit est. Et lorem ipsum. Pretium sagittis nisl. Id ut viverra. Arcu dis sapien vehicula amet lacus sodales sagittis quam minim in mauris integer ante eu. Nisl id id eget sed molestie nec ac mauris nonummy proin porttitor. Vestibulum orci a sed in ligula.</p>
<h2>Lorem pede adipiscing massa eu eros</h2>
<p>Proin a at. Sagittis congue vitae. Eu arcu sem. A pede cras volutpat faucibus dui. Est ridiculus vestibulum blandit a dui montes dignissim mauris ac tellus diam. Rutrum gravida orci id eget morbi. Nec ut mollis. Dolore nulla donec. Nunc accumsan consectetuer. Erat orci vel. Primis erat nostra nec laoreet tempor eos porttitor sem hendrerit dignissim venenatis faucibus vel pellentesque. Lobortis in mi vitae donec metus faucibus amet viverra at ut dolor varius felis ante blandit sit litora ac autem ante. Pellentesque pede quisque. In nonummy pulvinar. Eget nunc quam. Massa torquent ut penatibus hendrerit et nulla scelerisque odio dolor vitae quis. In in quam dolor nec arcu. Magna vitae feugiat. Donec fermentum bibendum.</p>
<h2>Pretium dui dui</h2>
<p>Convallis wisi urna. Ipsum tellus ultricies. Non ac pretium. In non accumsan purus nec aliquip hendrerit fusce ornare ut turpis quis dictum tincidunt in vestibulum fringilla ad. In et dui. Eget tellus quisque arcu varius per tellus neque sit convallis nulla tellus. Nam faucibus aliquam. Vitae vel sed turpis nascetur ultricies aliquam vitae ultricies sed lobortis vestibulum sapien non eu. Sem amet nulla. Leo elit ipsum imperdiet sit dictumst. Enim turpis vivamus. Posuere odio ipsum in augue quisque nisl duis metus. Etiam imperdiet curabitur. Quis velit arcu. Ipsum turpis libero vel donec et. Ac risus a tempus.</p>
</li>
<li class="right">
<ul id="summary2" class="summary">
<li class="caption">Summary 2</li>
<li class="contents">
<p>This plugin has actually been in the wild for nearly two years. I made it so I could learn jQuery and JavaScript. Thankfully, others have contributed feedback, code, tests, and demos to help it mature.</p>
<p>Originally, it was used to dock the header row of a long table to the top of the window so we knew what each column was. Every feature added from there was prompted by request.</p>
<p>I don't get a lot of time to work on this, so all of the help is much appreciated.</p>
</li>
</ul>
</li>
<li class="left">
<h2>Sit amet dolore</h2>
<p>Praesent ipsum nibh ut curabitur justo. Ut proin faucibus. Ornare molestie magnis nec tempus ultricies eu amet sed. Et egestas aptent. Vel dignissim justo sodales suscipit lorem quis ullamcorper lacinia. Ac ligula nascetur. Tortor non leo at lacus non feugiat nisl aut suscipit nec ac rhoncus sed ipsum. Mauris condimentum erat rutrum ultricies justo.</p>
<h2>Rhoncus mauris vivamus</h2>
<p>Consectetuer quam euismod id accumsan a tellus ultrices quam suspendisse metus sit aliquam nec fermentum. Fusce aenean wisi. Purus eget rutrum non risus duis. Risus varius commodo egestas diam est. Dictum tellus nullam pede in ligula egestas neque pharetra vel justo non. Eu pharetra vestibulum. Mauris pede mauris. Erat a tellus. Orci vivamus mauris in morbi et.</p>
<h2>Scelerisque diamlorem sollicitudin</h2>
<p>Elementum libero etiam magna vitae velit scelerisque purus suspendisse. Amet torquent diam. In lacus vestibulum a ligula etiam. Vel convallis sapien. Cras platea rutrum. Leo pede volutpat. Ullamcorper dui sollicitudin consectetuer donec amet cras lorem nunc mattis sed dapibus metus enim ligula. Volutpat eu dictum mus vel ultrices. Sit nunc mattis. Mus donec tellus amet in a quaerat non vivamus sed in condimentum. Lacus posuere in. Condimentum sodales lacinia. Eget ante sagittis quisque duis scelerisque praesent tristique ut. Ipsum justo nulla viverra ornare in nam lectus aliquam.</p><p>Donec eget id est nulla nisl ipsa sollicitudin lectus vel fusce neque. Phasellus egestas commodo. Orci ipsum ut. Etiam vitae turpis vitae sed velit. Orci sollicitudin at. Felis id sem. Pharetra nisl dui nam enim non. Donec ullamcorper cras ligula dui mattis eget proin vitae. Nisl suspendisse tristique laoreet in etiam. Ac maecenas bibendum dis vel suspendisse. Et quisque integer. In lacus magna vel in aenean dolor facilisis nec. Mi ad tincidunt a nec felis duis nec nulla id sit vitae elementum egestas gravida. Wisi maecenas lectus. Nec ut nullam.</p>
<h2>Asperiores lectus minim</h2>
<p>Lorem integer faucibus lorem eget augue. Vulputate eget facilisis eu sollicitudin eget. Justo libero tincidunt tincidunt quam lacus. Leo ipsum felis. Eget potenti suscipit. Porta at omnis aliquam eleifend luctus. Est morbi tristique libero pellentesque nunc nec consectetuer in eget ante arcu eget sit integer. Metus magna sem vitae quam luctus id in sit neque suspendisse lacinia. Et arcu eget ac ante vivamus. Vitae magna cursus. Sollicitudin a vivamus. Pede eu nunc vehicula erat ipsum. Fusce quisque tincidunt. Fermentum sed aliquam elementum ut vitae wisi curabitur eget. Posuere nulla in curabitur sapien nascetur. Et proin maecenas integer hendrerit ultricies sed sed eu eget feugiat sem pellentesque velit eu. Suspendisse dui lectus. Ut tincidunt vitae. Et molestie donec.</p>
<h2>Auctor malesuada lorem</h2>
<p>In feugiat ut aliquam turpis vehicula. Dolor aut in gravida in nam eget euismod erat. Dignissim dictum non. Elit erat lorem ipsum lorem ac leo at turpis tristique amet aliquam morbi et per aliquam suspendisse cras. Sed elementum mi. Magna gravida facilisis ante dis mattis. Accumsan magnis elementum. Lacus dolor dictum. Sit vivamus integer. Nonummy ut torquent. Massa penatibus sit. Condimentum pulvinar ullamcorper. Vulputate laoreet primis lacus nec donec dictum eu pellentesque eros dictum amet risus dui.</p>
</li>
<li class="right">
<ul id="summary3" class="summary">
<li class="caption">Summary 3</li>
<li class="contents">
<p>Here are other demo created to demonstrate the plugin:</p>
<ul class="demos">
<li><a href="index1.html">滚动到元素的头部开始固定</a></li>
<li><a href="index2.html">滚动到元素的头部20像素开始固定</a></li>
<li><a href="index3.html">滚动到一个标签头部开始固定</a></li>
<li><a href="index4.html">滚动到一个标签底部开始固定</a></li>
<li><a href="index5.html">滚动停在底部300像素位置</a></li>
<li><a href="index6.html">滚动停在一个标签的头部</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="footer">
<div class="main"><span class="title">Footer</span><span> - This footer is docked to the bottom of the window, but will reveal more content when scrolled far enough.</span></div>
</li>
<li class="footer-content">
<div class="main">
<h2>Sit amet justo</h2>
<p>Leo sed sed pulvinar et magna id eget condimentum laborum vel suspendisse. Porttitor mattis aenean. Accumsan sed adipiscing. Amet penatibus rutrum vitae vehicula viverra amet nibh semper nunc libero tincidunt massa vitae sagittis urna consectetuer magna a diam parturient. Nec nec dolor. Venenatis purus quis. In turpis in. Officiis hic mauris lorem wisi maecenas.</p>
<h2>Velit sed eget donec placerat vestibulum</h2>
<p>Orci id gravida per neque nibh. Nullam sit commodo tincidunt et diam vitae pharetra sed. Tempus sit sodales. Voluptatem wisi mattis inceptos tellus dolor rhoncus sed et eu turpis torquent ligula eu dui lorem nec accumsan platea lacinia ac. Non faucibus per sit in vehicula magna lacus deleniti. Tincidunt per aliquam. Vestibulum adipiscing laoreet eget eros commodo. Laoreet molestie a eros in nec sed justo venenatis. Eu lorem gravida. Nisl non a sociis convallis leo. Est nunc nisl porta dignissim turpis. Sapien sed nulla. Amet mi diam. Sem risus accumsan. Posuere viverra convallis. Est at netus. Tortor eget quam. Wisi nulla erat vestibulum tempor eu hendrerit vel dolor. Aliquam magnis sed etiam felis eros.</p>
<h2>Sit amet mi</h2><p>Porttitor adipiscing erat. Mollis libero sit porttitor cursus posuere tortor suspendisse lectus vel vestibulum mi. Libero dapibus vitae. Lorem massa blandit in turpis consectetuer quisque rhoncus morbi nulla magna rutrum praesent per ridiculus pellentesque ipsum adipiscing. Tellus rutrum aliquam. Natoque augue ut sem quam metus. Phasellus sit nec imperdiet eleifend tincidunt. Morbi erat accumsan.</p><h2>Curabitur lorem fames nunc gravida et</h2><p>Ut tellus massa consequat vitae quisque. Neque eleifend vestibulum maecenas nunc felis. Vitae praesent lacus. Tristique augue id in turpis vestibulum erat placerat ornare. A consectetuer accumsan et donec vehicula sed nunc non. Velit in nec. Maecenas orci erat gravida sit dui. Fusce repellendus nec pellentesque ligula ligula. Sit ligula commodo nulla nulla dui.</p><h2>Con ut tincidunt</h2><p>Eleifend non sodales cursus metus ligula risus luctus eleifend. Nulla integer arcu suspendisse ligula sed. Aliquet fames morbi. Ut sed dictumst. Nec nulla risus diam faucibus nam donec orci fermentum hac ullamcorper a. Justo in a molestie praesent tellus. In eget non. Sagittis arcu vitae lacinia sed dolor. Mattis suspendisse amet sed elit aenean in vel pulvinar.</p><h2>Sem facilisis ultricies</h2><p>Justo luctus molestie. Ante feugiat nulla. Faucibus cras lectus condimentum proident morbi. Urna porta eros pellentesque elit sit sed tristique feugiat nullam eu inceptos a voluptatem vestibulum. Vitae faucibus eros eros dui curabitur praesent eu eu. Taciti et mi. Aliqua quo integer. Euismod donec vitae. Dapibus mauris donec ante diam metus dui sit eget nulla nisl etiam.</p><h2>Praesent metus facilis elit sed urna pede vel porttitor</h2><p>Enim orci consequat. Ac adipiscing consectetuer. Class porttitor ac. Nec pellentesque commodo at et mauris. Vestibulum quis risus vel nec metus. Suspendisse molestie vehicula donec fermentum eu massa suspendisse vel enim orci at. Sed lacus dignissim. Nunc vestibulum erat non eget mattis ut arcu vitae. Placerat leo metus mauris pharetra tempus.</p>
</div>
</li>
</ul>
<a href="https://github.com/kujian/scrollfix" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="fork.png" alt="Fork me on GitHub"></a>
<script type="text/javascript" src="https://qdkfweb.cn/demo/base.js" charset="UTF-8"></script>
</body>
</html>