-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
pushpin.html
233 lines (219 loc) · 7.56 KB
/
pushpin.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
<!DOCTYPE html>
<html lang="en">
<head>
{{> head }}
</head>
<body>
{{> navbar }}
<main>
{{> intro}}
<div class="container">
<div class="row">
<div class="col s12 m8 offset-m1 xl7 offset-xl1">
<div id="introduction" class="section scrollspy">
<p class="caption">
Pushpin is our fixed positioning plugin. Use this to pin
elements to your page during specific scroll ranges. You can
check out our live example: the fixed table of contents on the
right.
</p>
<a
href="pushpin-demo.html"
target="_blank"
class="btn-large waves-effect waves-light"
>Open Demo</a
>
<h5>Demo Code</h5>
<pre><code class="language-javascript">
// Pushpin Demo Init
const pushPinDemoNavElems = document.querySelectorAll('.pushpin-demo-nav');
pushPinDemoNavElems.forEach(navElem => {
const navBox = navElem.getBoundingClientRect();
const contentElem = document.querySelector('#'+navElem.getAttribute('data-target'));
const contentBox = contentElem.getBoundingClientRect();
const offsetTop = Math.floor(contentBox.top + window.scrollY - document.documentElement.clientTop);
M.Pushpin.init(navElem, {
top: offsetTop,
bottom: offsetTop + contentBox.height - navBox.height
});
});
</code></pre>
<pre><code class="language-css">
// Only necessary for window height sized blocks.
html, body {
height: 100%;
}
</code></pre>
</div>
<div id="initialization" class="section scrollspy">
<h3 class="header">Initialization</h3>
<p>
Here is a sample initialization of pushpin. Take a look at what
the options are and customize them to your needs.
</p>
<pre><code class="language-javascript col s12">
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.pushpin');
var instances = M.Pushpin.init(elems, {
// specify options here
});
});
</code></pre>
</div>
<div id="options" class="section scrollspy">
<h3 class="header">Options</h3>
<table class="striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>top</td>
<td>Number</td>
<td>0</td>
<td>
The distance in pixels from the top of the page where the
element becomes fixed.
</td>
</tr>
<tr>
<td>bottom</td>
<td>Number</td>
<td>Infinity</td>
<td>
The distance in pixels from the top of the page where the
elements stops being fixed.
</td>
</tr>
<tr>
<td>offset</td>
<td>Number</td>
<td>0</td>
<td>
The offset from the top the element will be fixed at.
</td>
</tr>
<tr>
<td>onPositionChange</td>
<td>Function</td>
<td>null</td>
<td>
Callback function called when pushpin position changes.
You are provided with a position string.
</td>
</tr>
</tbody>
</table>
</div>
<div id="methods" class="scrollspy section">
<h3 class="header">Methods</h3>
<blockquote>
<p>
All the methods are called on the plugin instance. You can get
the plugin instance like this:
</p>
<pre><code class="language-javascript col s12">
var instance = M.Pushpin.getInstance(elem);
</code></pre>
</blockquote>
<h5 class="method-header">
.destroy();
</h5>
<p>Destroy plugin instance and teardown</p>
<pre><code class="language-javascript col s12">
instance.destroy();
</code></pre>
</div>
<div id="properties" class="scrollspy section">
<h3 class="header">Properties</h3>
<table class="striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>el</td>
<td>Element</td>
<td>The DOM element the plugin was initialized with.</td>
</tr>
<tr>
<td>options</td>
<td>Object</td>
<td>The options the instance was initialized with.</td>
</tr>
<tr>
<td>originalOffset</td>
<td>Number</td>
<td>Original offsetTop of element.</td>
</tr>
</tbody>
</table>
</div>
<div id="classes" class="section scrollspy">
<h3 class="header">CSS Classes</h3>
<p class="caption">
A pushpinned element has 3 states. One above and below the
scrolling threshold, and the pinned state where the element
becomes fixed. Because pushpin changes positioning, chances are
your element will look different when the states change. Use
these css classes to correctly style your 3 states.
</p>
<pre><code class="language-css col s12">
// Class for when element is above threshold
.pin-top {
position: relative;
}
// Class for when element is below threshold
.pin-bottom {
position: relative;
}
// Class for when element is pinned
.pinned {
position: fixed !important;
}
</code></pre>
</div>
</div>
<!-- Table of Contents -->
<div class="col hide-on-small-only m3 xl3">
<div class="toc-wrapper">
<div style="height: 1px;">
<ul class="section table-of-contents">
<li>
<a href="#introduction">Introduction</a>
</li>
<li>
<a href="#initialization">Initialization</a>
</li>
<li>
<a href="#options">Options</a>
</li>
<li>
<a href="#methods">Methods</a>
</li>
<li>
<a href="#properties">Properties</a>
</li>
<li>
<a href="#classes">CSS classes</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
{{> footer }}
<script type="module" src="/src/main.ts"></script>
</body>
</html>