@glitchr/stickyjs 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/package.json +15 -0
- package/src/css/index.css +127 -0
- package/src/index.js +1628 -0
package/README.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# Sticky JS library
|
package/package.json
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@glitchr/stickyjs",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "Sticky scroll library",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"repository": {
|
|
7
|
+
"url": "ssh://git@gitlab.glitchr.dev:public-repository/javascript/stickyjs.git",
|
|
8
|
+
"type": "git"
|
|
9
|
+
},
|
|
10
|
+
"author": "Marco Meyer <marco.meyer@glitchr.io>",
|
|
11
|
+
"license": "LGPL-3.0-or-later",
|
|
12
|
+
"scripts": {
|
|
13
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
/* Force to disable scroll-behavior: JQuery is handling this part (better control and stability) */
|
|
2
|
+
html { scroll-behavior: unset !important; }
|
|
3
|
+
|
|
4
|
+
* { -ms-overflow-style: none; scrollbar-width: none; }
|
|
5
|
+
*::-webkit-scrollbar { display: none; }
|
|
6
|
+
.sticky-prevent-scroll
|
|
7
|
+
{
|
|
8
|
+
overflow:hidden;
|
|
9
|
+
block-size: 100%;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.sticky { transition: margin 300ms ease-in-out, top 300ms ease-in-out, right 300ms ease-in-out, bottom 300ms ease-in-out, left 300ms ease-in-out; }
|
|
13
|
+
.sticky.skip-transition { transition: none; }
|
|
14
|
+
.sticky.show { opacity:1; }
|
|
15
|
+
|
|
16
|
+
.sticky-top.show { top:0; }
|
|
17
|
+
.sticky-top {
|
|
18
|
+
transition: all 250ms ease-in-out;
|
|
19
|
+
z-index:auto;
|
|
20
|
+
|
|
21
|
+
position: -webkit-sticky;
|
|
22
|
+
position: sticky;
|
|
23
|
+
top: 0;
|
|
24
|
+
|
|
25
|
+
align-self: flex-start;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.sticky-bottom.show { bottom:0; }
|
|
29
|
+
.sticky-bottom.hint { margin-top:-25%; }
|
|
30
|
+
.sticky-bottom {
|
|
31
|
+
|
|
32
|
+
position:fixed; bottom:-100%;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.sticky-widget.show { opacity:1; }
|
|
36
|
+
.sticky-widget {
|
|
37
|
+
position:-webkit-sticky;
|
|
38
|
+
position:sticky;
|
|
39
|
+
top: 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.sticky:not(.sticky-disabled) .sticky-easein.show { opacity:1; }
|
|
43
|
+
.sticky:not(.sticky-disabled) .sticky-easein { opacity:0; }
|
|
44
|
+
|
|
45
|
+
.sticky:not(.sticky-disabled) .sticky-easeout.show { opacity:1; }
|
|
46
|
+
.sticky:not(.sticky-disabled) .sticky-easeout { opacity:0; }
|
|
47
|
+
|
|
48
|
+
.sticky-magnet-first.show { opacity:1; }
|
|
49
|
+
.sticky-magnet-first.bottom-left { bottom:2em; left:4em; }
|
|
50
|
+
.sticky-magnet-first.bottom-right { bottom:2em; right:4em; }
|
|
51
|
+
.sticky-magnet-first.top-left { top:2em; left:4em; }
|
|
52
|
+
.sticky-magnet-first.top-right { top:2em; right:4em; }
|
|
53
|
+
.sticky-magnet-first
|
|
54
|
+
{
|
|
55
|
+
position:fixed;
|
|
56
|
+
z-index:11;
|
|
57
|
+
transition: opacity 250ms ease-in-out;
|
|
58
|
+
opacity:0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.sticky-magnet-last.show { opacity:1; }
|
|
62
|
+
.sticky-magnet-last.bottom-left { bottom:2em; left:4em; }
|
|
63
|
+
.sticky-magnet-last.bottom-right { bottom:2em; right:4em; }
|
|
64
|
+
.sticky-magnet-last.top-left { top:2em; left:4em; }
|
|
65
|
+
.sticky-magnet-last.top-right { top:2em; right:4em; }.sticky-magnet-last
|
|
66
|
+
{
|
|
67
|
+
position:fixed;
|
|
68
|
+
z-index:11;
|
|
69
|
+
transition: opacity 250ms ease-in-out;
|
|
70
|
+
opacity:0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.sticky-autoscroll
|
|
74
|
+
{
|
|
75
|
+
max-height: 100vh;
|
|
76
|
+
max-width: 100vw;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
.sticky-swipehint:not(.sticky-swipehint-reveal) .sticky-swipehint-container { display:none; }
|
|
81
|
+
.sticky-swipehint .sticky-swipehint-container {
|
|
82
|
+
|
|
83
|
+
position:absolute;
|
|
84
|
+
z-index: 1;
|
|
85
|
+
|
|
86
|
+
width: 100%;
|
|
87
|
+
height: 100%;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.sticky-swipehint.sticky-swipehint-reveal .sticky-swipehint-container > span { opacity:1; }
|
|
91
|
+
.sticky-swipehint .sticky-swipehint-container > span img { max-width: 100%; }
|
|
92
|
+
.sticky-swipehint .sticky-swipehint-container > span
|
|
93
|
+
{
|
|
94
|
+
position:absolute;
|
|
95
|
+
top: 50%;
|
|
96
|
+
left: 50%;
|
|
97
|
+
transform: translate(-50%, -50%);
|
|
98
|
+
|
|
99
|
+
width:100px;
|
|
100
|
+
height:100px;
|
|
101
|
+
|
|
102
|
+
opacity:0;
|
|
103
|
+
transition: opacity 500ms ease-in-out;
|
|
104
|
+
|
|
105
|
+
border-radius:100%;
|
|
106
|
+
padding:1em;
|
|
107
|
+
|
|
108
|
+
object-fit:cover;
|
|
109
|
+
animation:blink normal 4s infinite ease-in-out;
|
|
110
|
+
|
|
111
|
+
backdrop-filter: blur(5px);
|
|
112
|
+
-webkit-backdrop-filter: blur(5px);
|
|
113
|
+
background-color:#FFF5;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@keyframes blink {
|
|
117
|
+
0% { opacity: 0; }
|
|
118
|
+
25% { opacity: 1; }
|
|
119
|
+
50% { opacity: 1; }
|
|
120
|
+
100% { opacity: 0; }
|
|
121
|
+
}
|
|
122
|
+
@-webkit-keyframes blink {
|
|
123
|
+
0% { opacity: 0; }
|
|
124
|
+
25% { opacity: 1; }
|
|
125
|
+
50% { opacity: 1; }
|
|
126
|
+
100% { opacity: 0; }
|
|
127
|
+
}
|