-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathexample.html
121 lines (103 loc) · 9.22 KB
/
example.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery scrollPoint test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jQuery.scrollPoint.js"></script>
<script>
$(function() {
var pitch = 50,// This is not a good idea you should prefer using offsetUp and offsetDown parameters
toggle = ['addClass', 'removeClass'];
// Bind an element with a scroll zone
$("#toFixed").scrollPoint({
up : $('#col').offset().top - pitch,
down : $('#col').offset().top - pitch + $('#col').outerHeight() - $('#toFixed').outerHeight(),
})
// Event when the scroll offset enter the scroll zone
$(document).on('scrollPointEnter', '#toFixed', function() {
$(this).css({
position:"fixed",
top: pitch
})
})
// Event when the scroll offset leave the scroll zone
$(document).on('scrollPointLeave', '#toFixed', function( event ) {
var TOP = 0
if ( event.isDown ) {
TOP = $('#col').outerHeight() - $('#toFixed').outerHeight();
}
$(this).css({
position:"absolute",
top: TOP
})
});
// Bind multiple element to their own scroll zone
// The offsetUp and offsetDown allow to shift the
// scroll zone define by each element.
$('p').scrollPoint({
offsetUp : $(window).height() / 3,
offsetDown : $(window).height() / 4
});
// Event trigger each time you scroll to now if you are in or out the zone
$(document).on('scrollPointMove', 'p', function(e) {
var func = e.isIn ? "addClass" : "removeClass";
$(this)[func]('active');
});
});
</script>
<style>
body{
padding: 2em;
margin: 0;
font: 1em sans-serif;
}
#page {
width: 600px;
margin: 0 auto;
}
#col{
position: relative;
width:100px;
height: 1000px;
border: 1px solid red;
float: left;
margin: 0 1em 1em 0
}
#toFixed {
width:100px;
height: 50px;
padding-top: 50px;
background: black;
}
p {
opacity: .1;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-ms-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
p.active, p:hover {
opacity: 1;
}
</style>
</head>
<body>
<div id="page">
<p class="active">Cupcake ipsum dolor sit amet brownie soufflé donut ice cream. Marzipan muffin I love gummi bears chocolate bar. Jelly beans carrot cake candy canes bear claw icing. Pie candy applicake caramels bonbon lollipop pudding marzipan. Macaroon ice cream oat cake pastry pastry. I love chupa chups pie donut. Chocolate bar caramels pie dessert apple pie sweet roll I love sesame snaps. Donut bear claw I love powder fruitcake sesame snaps topping. Dessert chocolate cake chupa chups. Lemon drops apple pie applicake cookie marshmallow sweet cheesecake. Marshmallow carrot cake applicake fruitcake chocolate cake dragée faworki. Powder gummies macaroon candy I love marzipan.</p>
<div id="col">
<div id="toFixed"></div>
</div>
<p>Tart tart wypas jujubes tiramisu. Muffin chocolate chocolate bar wafer sweet roll toffee I love. Icing I love gummi bears candy canes donut jelly-o bonbon soufflé. Dragée tootsie roll chocolate bar lollipop oat cake donut tootsie roll applicake. Ice cream sugar plum oat cake jelly-o marzipan bear claw cupcake. Biscuit jelly pie chocolate cake sugar plum cotton candy liquorice tiramisu pudding. Caramels jelly-o danish danish lollipop. Dessert I love lollipop faworki. Chocolate jelly beans croissant I love macaroon. I love I love danish wypas tootsie roll. Sesame snaps I love chupa chups lollipop cupcake jelly-o. Pie danish fruitcake chupa chups.</p>
<p>Dessert gummies applicake cupcake icing. Jelly I love dessert bonbon cookie. Bonbon wypas gingerbread I love I love croissant toffee. Gummies gummi bears chocolate cake I love. I love sugar plum cheesecake soufflé. Tootsie roll halvah jelly-o faworki cheesecake sweet topping icing. I love faworki jelly beans. Caramels soufflé I love pastry chocolate bar chocolate cookie chocolate bar dessert. Tiramisu fruitcake candy canes sweet roll I love croissant faworki. Dragée wafer marshmallow jujubes bonbon. I love jelly beans powder wypas brownie chocolate cake apple pie tart. Gummies ice cream oat cake muffin. Topping cookie candy canes I love tiramisu toffee bear claw cake. Lemon drops fruitcake gummi bears I love cotton candy dragée.</p>
<p>Topping apple pie soufflé applicake topping danish. Fruitcake sugar plum I love candy canes sugar plum chocolate cake toffee chocolate. Donut wypas gummies biscuit. Chupa chups wafer jujubes bear claw chupa chups. I love dragée I love jelly beans sugar plum I love candy canes. Carrot cake donut I love lollipop topping. Powder croissant sweet faworki toffee. Sugar plum sweet roll caramels dessert. Caramels gummies sugar plum cookie sugar plum I love sweet. Chocolate bar applicake pudding wafer I love applicake danish halvah cotton candy. Dragée powder jelly I love macaroon chocolate. Gingerbread halvah I love halvah. Biscuit gummies applicake. Wafer I love I love jelly-o.</p>
<p>Tootsie roll pudding lemon drops brownie ice cream croissant gummi bears. Powder icing marzipan sesame snaps I love chocolate bar. Cookie brownie lollipop gingerbread muffin lemon drops icing oat cake. I love I love icing muffin gummi bears. Jelly cheesecake powder I love marzipan. I love pastry candy canes muffin apple pie candy canes gingerbread tart danish. Gingerbread candy I love candy. I love I love tootsie roll lollipop chocolate bar liquorice cheesecake cotton candy. Donut faworki carrot cake. Tootsie roll sweet roll gummi bears oat cake I love brownie chocolate bar apple pie. Marshmallow marshmallow tart pie brownie carrot cake biscuit jelly beans lollipop. Wypas jelly beans candy canes dessert jujubes icing muffin wypas. Wafer I love jelly-o bonbon halvah dessert halvah cheesecake.</p>
<p>Tart tart wypas jujubes tiramisu. Muffin chocolate chocolate bar wafer sweet roll toffee I love. Icing I love gummi bears candy canes donut jelly-o bonbon soufflé. Dragée tootsie roll chocolate bar lollipop oat cake donut tootsie roll applicake. Ice cream sugar plum oat cake jelly-o marzipan bear claw cupcake. Biscuit jelly pie chocolate cake sugar plum cotton candy liquorice tiramisu pudding. Caramels jelly-o danish danish lollipop. Dessert I love lollipop faworki. Chocolate jelly beans croissant I love macaroon. I love I love danish wypas tootsie roll. Sesame snaps I love chupa chups lollipop cupcake jelly-o. Pie danish fruitcake chupa chups.</p>
<p>Dessert gummies applicake cupcake icing. Jelly I love dessert bonbon cookie. Bonbon wypas gingerbread I love I love croissant toffee. Gummies gummi bears chocolate cake I love. I love sugar plum cheesecake soufflé. Tootsie roll halvah jelly-o faworki cheesecake sweet topping icing. I love faworki jelly beans. Caramels soufflé I love pastry chocolate bar chocolate cookie chocolate bar dessert. Tiramisu fruitcake candy canes sweet roll I love croissant faworki. Dragée wafer marshmallow jujubes bonbon. I love jelly beans powder wypas brownie chocolate cake apple pie tart. Gummies ice cream oat cake muffin. Topping cookie candy canes I love tiramisu toffee bear claw cake. Lemon drops fruitcake gummi bears I love cotton candy dragée.</p>
<p>Topping apple pie soufflé applicake topping danish. Fruitcake sugar plum I love candy canes sugar plum chocolate cake toffee chocolate. Donut wypas gummies biscuit. Chupa chups wafer jujubes bear claw chupa chups. I love dragée I love jelly beans sugar plum I love candy canes. Carrot cake donut I love lollipop topping. Powder croissant sweet faworki toffee. Sugar plum sweet roll caramels dessert. Caramels gummies sugar plum cookie sugar plum I love sweet. Chocolate bar applicake pudding wafer I love applicake danish halvah cotton candy. Dragée powder jelly I love macaroon chocolate. Gingerbread halvah I love halvah. Biscuit gummies applicake. Wafer I love I love jelly-o.</p>
<p>Cupcake ipsum dolor sit amet brownie soufflé donut ice cream. Marzipan muffin I love gummi bears chocolate bar. Jelly beans carrot cake candy canes bear claw icing. Pie candy applicake caramels bonbon lollipop pudding marzipan. Macaroon ice cream oat cake pastry pastry. I love chupa chups pie donut. Chocolate bar caramels pie dessert apple pie sweet roll I love sesame snaps. Donut bear claw I love powder fruitcake sesame snaps topping. Dessert chocolate cake chupa chups. Lemon drops apple pie applicake cookie marshmallow sweet cheesecake. Marshmallow carrot cake applicake fruitcake chocolate cake dragée faworki. Powder gummies macaroon candy I love marzipan.</p>
<p>Tootsie roll pudding lemon drops brownie ice cream croissant gummi bears. Powder icing marzipan sesame snaps I love chocolate bar. Cookie brownie lollipop gingerbread muffin lemon drops icing oat cake. I love I love icing muffin gummi bears. Jelly cheesecake powder I love marzipan. I love pastry candy canes muffin apple pie candy canes gingerbread tart danish. Gingerbread candy I love candy. I love I love tootsie roll lollipop chocolate bar liquorice cheesecake cotton candy. Donut faworki carrot cake. Tootsie roll sweet roll gummi bears oat cake I love brownie chocolate bar apple pie. Marshmallow marshmallow tart pie brownie carrot cake biscuit jelly beans lollipop. Wypas jelly beans candy canes dessert jujubes icing muffin wypas. Wafer I love jelly-o bonbon halvah dessert halvah cheesecake.</p>
</div>
</body>
</html>