-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
157 lines (143 loc) · 6.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ScrollToStick.js</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="www/styles/common.css">
<link rel="stylesheet" href="www/styles/home.css">
<meta name="description" content="A Javascript way to create parallax header effects.">
<meta name=viewport content="width=device-width, initial-scale=1">
<meta property="og:title" content="ScrollToStick" />
<meta property="og:description" content="A Javascript way to create parallax header effects." />
</head>
<body class="home-page">
<div id="hero-wrapper" class="hero-wrapper">
<div id="hero" class="container hero">
<div class="d-flex justify-content-between mb-3 flex-md-row flex-column text-center text-md-left">
<h1 class="title">
<img src="www/assets/icon_sts.png" height="70px"> ScrollToStick.js
</h1>
<span class="github-btn-holder mx-0 my-auto">
<a class="github-button" href="https://github.com/dibosh/scroll-to-stick" data-icon="octicon-star"
data-size="large" data-show-count="true" aria-label="Star dibosh/scroll-to-stick on GitHub">Star</a>
</span>
</div>
<h3 class="subtitle text-center text-md-left">A Javascript way to create parallax header effects.</h3>
</div>
</div>
<!-- usage -->
<div class="container example-section">
<div class="row">
<div class="col-md-12 col-lg-6">
<h4 class="pb-3">🤷♀️ How to use</h4>
<p>
Using the javascript function directly is your best way to make use of this
library. The layout for this kind of feature is important. Normally you should have
a layout like below-
</p>
<p>
<script src="https://gist.github.com/dibosh/d0058644dde3343867efd1cf546d9800.js"></script>
</p>
<p>
Take a note on how we have attached an id to <code>header-wrap</code> element.
This is important. As the javascript function <code>applyScrollToStick</code> either
takes an element or id of an element.
</p>
<p>
The second param of the function is <code>offset</code>. Determines how much the header-wrap
should move back and forth when you do scrolling. In the given layout, we want it to
move back and forth the by the amount of height <code>header</code> is occupying. So, we
can do-
</p>
<p>
<script src="https://gist.github.com/dibosh/5897f4b635c9e6e936e4ffd064c50fa7.js"></script>
</p>
</div>
<div class="col-md-12 col-lg-6 frame-holder">
<iframe class="frame" src="www/pages/example.html"></iframe>
</div>
</div>
</div>
<!-- getting started -->
<div id="getting-started" class="container getting-started">
<h4 class="pb-4">🤦♀️ Wait! I need to install it!</h4>
<div class="row">
<div class="col-md-12 col-lg-6">
<p>
To install-
<pre>$ npm install scroll-to-stick</pre>
</p>
<p>
Then you can either <code>import</code> the function in your code-
<pre>import {applyScrollToStick} from 'scroll-to-stick';</pre>
</p>
<p>
Or simply add the file as <code>script</code> tag-
<pre><script src="scroll-to-stick/dist/scorll.to.stick.js"><script></pre>
</p>
<p>
If you want to use it in your react project, you can simply import the react
component <code>ScrollToStick</code>-
<pre>import {ScrollToStick} from 'scroll-to-stick';</pre>
Then use it the way it's shown in sample code on the right.
</p>
</div>
<div class="col-md-12 col-lg-6">
<script src="https://gist.github.com/dibosh/b4dfd38a0001e1ec52db53b525ff43c3.js"></script>
<script src="https://gist.github.com/dibosh/944c05b5ba87a48803ecd9cab38862e7.js"></script>
</div>
</div>
</div>
<!-- advanced -->
<div class="container advanced-usage">
<h4 class="pb-4">🦸♀️ Advanced stuffs!</h4>
<div class="row">
<div class="col-md-12 col-lg-6">
<p>
The function can take a <code>listener</code> function, which may expect to receive
a status. Either of <code>normal</code> or <code>stuck-top</code>.
</p>
<p>
Using the status you may decide to add your custom classes or change some behaviour or
apply some animation - you name it. This is the best way to control what happens when
the scroll to stick component is in normal state or in stuck on top. The code snippet on right
is used in the demo above 👉
</p>
</div>
<div class="col-md-12 col-lg-6">
<script src="https://gist.github.com/dibosh/a2a5b4b350ef5eed05db19e22ea97d5a.js"></script>
</div>
</div>
</div>
<!-- show some love -->
<div class="container show-some-love">
<h4 class="pb-4">🥰 Show some love!</h4>
<div class="row">
<div class="col-md-12 col-lg-6">
<p>
If you find this work interesting or useful and going to use it soon or using it now,
please consider sharing the love by hitting a star on the repo!
</p>
<p>
<a class="github-button" href="https://github.com/dibosh/scroll-to-stick" data-icon="octicon-star" data-size="large"
data-show-count="true" aria-label="Star dibosh/scroll-to-stick on GitHub">Star</a>
</p>
<p>
Cause you know- <code>😍 love will keep us alive!</code>
</p>
</div>
</div>
</div>
<div class="container p-4">
<p class="text-center">
Made with 🧡 and ☕
</p>
</div>
<script src="dist/scroll.to.stick.js"></script>
<script src="www/scripts/home.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>