@glitchr/stickyjs 1.0.40 → 1.0.43
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/package.json +1 -1
- package/src/js/sticky.js +74 -68
package/package.json
CHANGED
package/src/js/sticky.js
CHANGED
|
@@ -694,16 +694,16 @@ $.fn.serializeObject = function () {
|
|
|
694
694
|
var maxScrollY = $(el).prop("scrollHeight") - Math.round($(el).prop("clientHeight"));
|
|
695
695
|
if (maxScrollY == 0) maxScrollY = Math.round($(el).prop("clientHeight"));
|
|
696
696
|
|
|
697
|
-
scrollTop = Math.max(0, Math.min(dict["top"] ?? $(el).prop("scrollTop"), maxScrollY));
|
|
698
|
-
scrollLeft = Math.max(0, Math.min(dict["left"] ?? $(el).prop("scrollLeft"), maxScrollX));
|
|
697
|
+
var scrollTop = Math.max(0, Math.min(dict["top"] ?? $(el).prop("scrollTop"), maxScrollY));
|
|
698
|
+
var scrollLeft = Math.max(0, Math.min(dict["left"] ?? $(el).prop("scrollLeft"), maxScrollX));
|
|
699
699
|
|
|
700
|
-
speed = parseFloat(dict["speed"] ?? 0);
|
|
701
|
-
easing = dict["easing"] ?? "swing";
|
|
702
|
-
debounce = dict["debounce"] ?? 0;
|
|
700
|
+
var speed = parseFloat(dict["speed"] ?? 0);
|
|
701
|
+
var easing = dict["easing"] ?? "swing";
|
|
702
|
+
var debounce = dict["debounce"] ?? 0;
|
|
703
703
|
|
|
704
|
-
duration = 1000*Sticky.parseDuration(dict["duration"] ?? 0);
|
|
705
|
-
durationX = 1000*Sticky.parseDuration(dict["duration-x"] ?? dict["duration"] ?? 0);
|
|
706
|
-
durationY = 1000*Sticky.parseDuration(dict["duration-y"] ?? dict["duration"] ?? 0);
|
|
704
|
+
var duration = 1000*Sticky.parseDuration(dict["duration"] ?? 0);
|
|
705
|
+
var durationX = 1000*Sticky.parseDuration(dict["duration-x"] ?? dict["duration"] ?? 0);
|
|
706
|
+
var durationY = 1000*Sticky.parseDuration(dict["duration-y"] ?? dict["duration"] ?? 0);
|
|
707
707
|
|
|
708
708
|
if(speed) {
|
|
709
709
|
|
|
@@ -902,7 +902,7 @@ $.fn.serializeObject = function () {
|
|
|
902
902
|
x0 = touchobj.pageX;
|
|
903
903
|
y0 = touchobj.pageY;
|
|
904
904
|
|
|
905
|
-
},
|
|
905
|
+
}, { passive: true });
|
|
906
906
|
|
|
907
907
|
window.addEventListener('touchend', function (e) {
|
|
908
908
|
|
|
@@ -921,7 +921,7 @@ $.fn.serializeObject = function () {
|
|
|
921
921
|
handleSwipe(this, swipeDirection);
|
|
922
922
|
});
|
|
923
923
|
|
|
924
|
-
},
|
|
924
|
+
}, { passive: true });
|
|
925
925
|
}
|
|
926
926
|
|
|
927
927
|
|
|
@@ -979,7 +979,7 @@ $.fn.serializeObject = function () {
|
|
|
979
979
|
|
|
980
980
|
var scrollPercentY = scrollDirY == "up" ? 100-scrollPercent : scrollPercent;
|
|
981
981
|
|
|
982
|
-
if(!className in trigger[target]) trigger[target][className] = true;
|
|
982
|
+
if(!(className in trigger[target])) trigger[target][className] = true;
|
|
983
983
|
if(scrollTrigger == "from" && scrollDirY == e.scrollY.direction && e.scrollY.percent >= scrollPercentY)
|
|
984
984
|
target.dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:0, dir:scrollDirY, percent:scrollPercentY}}));
|
|
985
985
|
if(scrollTrigger == "once" && scrollDirY == e.scrollY.direction && e.scrollY.percent >= scrollPercentY && trigger[target][className])
|
|
@@ -1079,11 +1079,13 @@ $.fn.serializeObject = function () {
|
|
|
1079
1079
|
|
|
1080
1080
|
}).map(function() {
|
|
1081
1081
|
|
|
1082
|
-
var scroller
|
|
1083
|
-
var
|
|
1084
|
-
var
|
|
1085
|
-
var
|
|
1086
|
-
var
|
|
1082
|
+
var scroller = $(this).closestScrollable()[0];
|
|
1083
|
+
var $scroller = $(scroller);
|
|
1084
|
+
var padding = Sticky.getScrollPadding(scroller);
|
|
1085
|
+
var scrollTop = $scroller.scrollTop() + padding.top;
|
|
1086
|
+
var scrollBottom = scrollTop + scroller.clientHeight;
|
|
1087
|
+
var scrollLeft = $scroller.scrollLeft() + padding.left;
|
|
1088
|
+
var scrollRight = scrollLeft + scroller.clientWidth;
|
|
1087
1089
|
|
|
1088
1090
|
var offsetTop = this.offsetTop;
|
|
1089
1091
|
var offsetBottom = this.offsetTop + this.clientHeight;
|
|
@@ -1142,16 +1144,15 @@ $.fn.serializeObject = function () {
|
|
|
1142
1144
|
var hash = null;
|
|
1143
1145
|
if(Settings.debug > 1) console.log("Sticky headlines:", $(ids));
|
|
1144
1146
|
|
|
1145
|
-
var elAll = $($(ids).filter(function() {
|
|
1146
1147
|
|
|
1148
|
+
var elAll = $(ids).filter(function() {
|
|
1147
1149
|
if(this === $(Settings.identifier)) return false;
|
|
1148
1150
|
return this.getBoundingClientRect().top < Sticky.getScrollPadding(scroller).top + 1;
|
|
1149
|
-
|
|
1150
1151
|
}).toArray().sort(function (el1, el2) {
|
|
1151
|
-
|
|
1152
1152
|
return el1.offsetTop > el2.offsetTop ? -1
|
|
1153
1153
|
: (el1.offsetTop < el2.offsetTop ? 1 : 0);
|
|
1154
|
-
})
|
|
1154
|
+
});
|
|
1155
|
+
elAll = $(elAll); // re-wrap as jQuery so .filter (with `this` as element) and .has() work below
|
|
1155
1156
|
|
|
1156
1157
|
var el = elAll.filter(function() {
|
|
1157
1158
|
|
|
@@ -1200,7 +1201,8 @@ $.fn.serializeObject = function () {
|
|
|
1200
1201
|
|
|
1201
1202
|
$(e.target).find(".sticky-top").each(function() {
|
|
1202
1203
|
|
|
1203
|
-
|
|
1204
|
+
const $this = $(this);
|
|
1205
|
+
var scrollhide = $this.attr("aria-scrollhide") || Sticky.get("scrollhide");
|
|
1204
1206
|
scrollhide = scrollhide === "false" ? false : scrollhide;
|
|
1205
1207
|
|
|
1206
1208
|
var that = this;
|
|
@@ -1209,10 +1211,10 @@ $.fn.serializeObject = function () {
|
|
|
1209
1211
|
var isAnchor = Sticky.epsilon(e.scrollY.top, anchorY);
|
|
1210
1212
|
if(e.first || isAnchor) {
|
|
1211
1213
|
|
|
1212
|
-
$
|
|
1213
|
-
$
|
|
1214
|
+
$this.addClass("show");
|
|
1215
|
+
$this.removeAttr("style");
|
|
1214
1216
|
|
|
1215
|
-
} else if(e.scrollY.top > this.clientHeight || $
|
|
1217
|
+
} else if(e.scrollY.top > this.clientHeight || $this.hasClass("show")) {
|
|
1216
1218
|
|
|
1217
1219
|
// Prevent element shaking
|
|
1218
1220
|
if(Sticky.get("transition") && Sticky.get("transition").indexOf(this) !== -1) return;
|
|
@@ -1222,61 +1224,61 @@ $.fn.serializeObject = function () {
|
|
|
1222
1224
|
// Action element
|
|
1223
1225
|
if(e.scrollY.delta < 0 && e.scrollY.bottom > 0) {
|
|
1224
1226
|
|
|
1225
|
-
$
|
|
1226
|
-
$
|
|
1227
|
-
if(!e.first) $
|
|
1227
|
+
$this.addClass("show");
|
|
1228
|
+
$this.removeAttr("style");
|
|
1229
|
+
if(!e.first) $this.removeClass("skip-transition");
|
|
1228
1230
|
|
|
1229
1231
|
} else if(e.scrollY.delta > 0){
|
|
1230
1232
|
|
|
1231
|
-
var borderThickness = parseInt($
|
|
1232
|
-
+ parseInt($
|
|
1233
|
+
var borderThickness = parseInt($this.css("border-bottom-width"))
|
|
1234
|
+
+ parseInt($this.css("border-top-width"));
|
|
1233
1235
|
|
|
1234
|
-
$
|
|
1235
|
-
$
|
|
1236
|
+
$this.removeClass("show");
|
|
1237
|
+
$this.css("top", -this.clientHeight-borderThickness);
|
|
1236
1238
|
if(e.scrollY.top == e.scrollY.delta && !e.first)
|
|
1237
|
-
$
|
|
1239
|
+
$this.addClass("skip-transition");
|
|
1238
1240
|
}
|
|
1239
1241
|
|
|
1240
1242
|
} else { // Smooth transition
|
|
1241
1243
|
|
|
1242
1244
|
Sticky.remove("transition", this);
|
|
1243
1245
|
|
|
1244
|
-
$
|
|
1246
|
+
$this.css("top", Math.min(0,-e.scrollY.top));
|
|
1245
1247
|
if(e.scrollY.top > 0 && !e.first)
|
|
1246
|
-
$
|
|
1248
|
+
$this.addClass("skip-transition");
|
|
1247
1249
|
}
|
|
1248
1250
|
}
|
|
1249
1251
|
|
|
1250
1252
|
var style = window.getComputedStyle(this);
|
|
1251
|
-
var scroller = $
|
|
1252
|
-
var scrollcatchPos = $
|
|
1253
|
-
var scrollcatchClone = $
|
|
1253
|
+
var scroller = $this.closestScrollable()[0];
|
|
1254
|
+
var scrollcatchPos = $this.attr("aria-scrollcatch-pos");
|
|
1255
|
+
var scrollcatchClone = $this.attr("aria-scrollcatch-clone");
|
|
1254
1256
|
|
|
1255
1257
|
if(!e.scrollT.elastic) {
|
|
1256
1258
|
|
|
1257
1259
|
if(style["position"] !== "fixed" && !scrollcatchClone) {
|
|
1258
1260
|
|
|
1259
|
-
var scrollcatch = $
|
|
1261
|
+
var scrollcatch = $this.attr("aria-scrollcatch") || Sticky.get("scrollcatch");
|
|
1260
1262
|
scrollcatch = scrollcatch === true ? style["z-index"] : scrollcatch;
|
|
1261
1263
|
|
|
1262
1264
|
if (scrollcatch !== false && this.offsetTop <= scroller.scrollTop) {
|
|
1263
1265
|
|
|
1264
|
-
var that = $
|
|
1266
|
+
var that = $this.clone().removeAttr("id")
|
|
1265
1267
|
.attr("aria-scrollcatch-clone", true);
|
|
1266
1268
|
|
|
1267
|
-
$
|
|
1269
|
+
$this.addClass("caught")
|
|
1268
1270
|
.attr("aria-scrollcatch-pos", scroller.scrollTop+1)
|
|
1269
1271
|
.attr("aria-labelledby", $(that).uniqueId().attr("id"));
|
|
1270
1272
|
|
|
1271
|
-
$(that).insertBefore($
|
|
1273
|
+
$(that).insertBefore($this.css("position", "fixed").css("z-index", scrollcatch));
|
|
1272
1274
|
}
|
|
1273
1275
|
|
|
1274
1276
|
} else if(scrollcatchPos > scroller.scrollTop) {
|
|
1275
1277
|
|
|
1276
|
-
var that = $("#"+$
|
|
1278
|
+
var that = $("#"+$this.attr("aria-labelledby"));
|
|
1277
1279
|
$(that).remove();
|
|
1278
1280
|
|
|
1279
|
-
$
|
|
1281
|
+
$this.removeClass("caught").css("position", "").css("z-index" , "")
|
|
1280
1282
|
.removeAttr("aria-scrollcatch-pos");
|
|
1281
1283
|
}
|
|
1282
1284
|
}
|
|
@@ -1285,51 +1287,52 @@ $.fn.serializeObject = function () {
|
|
|
1285
1287
|
$(e.target).find(".sticky-bottom").each(function() {
|
|
1286
1288
|
|
|
1287
1289
|
if(!Sticky.get("scrollhide")) return;
|
|
1290
|
+
const $this = $(this);
|
|
1288
1291
|
var threshold = 1000*Sticky.parseDuration(Sticky.get("threshold"));
|
|
1289
1292
|
var scrollHint = Math.min(1, Math.max(0, parseFloat(Sticky.get("scrollhint"))));
|
|
1290
|
-
var hasHint = $
|
|
1293
|
+
var hasHint = $this.hasClass("hint");
|
|
1291
1294
|
|
|
1292
1295
|
if(e.reset) hasReset = true;
|
|
1293
1296
|
if(scrollHint) {
|
|
1294
1297
|
|
|
1295
1298
|
if(!e.scrollY.bottomElastic) {
|
|
1296
|
-
$
|
|
1297
|
-
$
|
|
1299
|
+
$this.removeClass("hint");
|
|
1300
|
+
$this.off("click.hint");
|
|
1298
1301
|
hasReset = false;
|
|
1299
1302
|
}
|
|
1300
1303
|
|
|
1301
1304
|
if(e.scrollT.delta.bottom > scrollHint*threshold && !hasHint) {
|
|
1302
|
-
$
|
|
1303
|
-
$
|
|
1305
|
+
$this.addClass("hint");
|
|
1306
|
+
$this.on("click.hint", function() { $(this).removeClass("hint").addClass("show"); });
|
|
1304
1307
|
hasReset = false;
|
|
1305
1308
|
}
|
|
1306
1309
|
}
|
|
1307
1310
|
|
|
1308
1311
|
threshold = hasReset && hasHint ? (1-scrollHint) * threshold : threshold;
|
|
1309
|
-
if($
|
|
1312
|
+
if($this.hasClass("show")) {
|
|
1310
1313
|
|
|
1311
|
-
$
|
|
1314
|
+
$this.off("click.hint");
|
|
1312
1315
|
|
|
1313
1316
|
// Action element
|
|
1314
1317
|
if (e.scrollY.bottom > this.clientHeight || e.scrollT.delta.top > threshold) {
|
|
1315
1318
|
|
|
1316
|
-
$
|
|
1317
|
-
$
|
|
1318
|
-
$
|
|
1319
|
-
$
|
|
1319
|
+
$this.removeClass("show");
|
|
1320
|
+
$this.removeClass("hint");
|
|
1321
|
+
$this.removeClass("skip-transition");
|
|
1322
|
+
$this.removeAttr("style");
|
|
1320
1323
|
|
|
1321
1324
|
} else { // Smooth transition
|
|
1322
1325
|
|
|
1323
|
-
$
|
|
1324
|
-
$
|
|
1325
|
-
if(e.scrollY.bottom > 0) $
|
|
1326
|
+
$this.css("bottom", Math.min(0, -e.scrollY.bottom));
|
|
1327
|
+
$this.css("position", Sticky.get("scrollcatch"));
|
|
1328
|
+
if(e.scrollY.bottom > 0) $this.addClass("skip-transition");
|
|
1326
1329
|
}
|
|
1327
1330
|
|
|
1328
1331
|
} else if(e.scrollT.delta.bottom > threshold) {
|
|
1329
1332
|
|
|
1330
|
-
$
|
|
1331
|
-
$
|
|
1332
|
-
$
|
|
1333
|
+
$this.off("click.hint");
|
|
1334
|
+
$this.addClass("show").removeClass("hint");
|
|
1335
|
+
$this.removeAttr("style");
|
|
1333
1336
|
}
|
|
1334
1337
|
});
|
|
1335
1338
|
|
|
@@ -1426,7 +1429,7 @@ $.fn.serializeObject = function () {
|
|
|
1426
1429
|
if(extraEaseOut < 0) extraEaseOut = Math.max(extraEaseOut, -this.clientHeight);
|
|
1427
1430
|
|
|
1428
1431
|
// ease-in-out should not overlap
|
|
1429
|
-
if(Math.sign(extraEaseIn) == Math.sign(
|
|
1432
|
+
if(Math.sign(extraEaseIn) == Math.sign(extraEaseOut)) {
|
|
1430
1433
|
if(extraEaseIn < 0) extraEaseOut = Math.min(extraEaseOut, extraEaseIn);
|
|
1431
1434
|
else extraEaseOut = Math.max(extraEaseOut, extraEaseIn);
|
|
1432
1435
|
}
|
|
@@ -1438,7 +1441,7 @@ $.fn.serializeObject = function () {
|
|
|
1438
1441
|
// Y = 0 : viewport bottom = element top
|
|
1439
1442
|
var bottom = this.offsetTop+this.clientHeight - (e.scrollY.top);
|
|
1440
1443
|
|
|
1441
|
-
var isBiggerThanViewport = (e.screen.vh < this.
|
|
1444
|
+
var isBiggerThanViewport = (e.screen.vh < this.clientHeight);
|
|
1442
1445
|
var show = $(this).hasClass("show");
|
|
1443
1446
|
var easeIn = $(this).hasClass("sticky-easein") && extraEaseIn !== undefined && !show;
|
|
1444
1447
|
var easeOut = $(this).hasClass("sticky-easeout") && extraEaseOut !== undefined && show;
|
|
@@ -1715,13 +1718,16 @@ $.fn.serializeObject = function () {
|
|
|
1715
1718
|
var thresholdMinY = $(scroller).data("autoscroll-minheight");
|
|
1716
1719
|
if(thresholdMinY == undefined) thresholdMinY = Sticky.get("autoscroll_minheight");
|
|
1717
1720
|
|
|
1718
|
-
var
|
|
1719
|
-
var
|
|
1720
|
-
var
|
|
1721
|
+
var $scroller = $(scroller);
|
|
1722
|
+
var scrollHeight = $scroller.prop('scrollHeight') - $scroller.prop("clientHeight");
|
|
1723
|
+
var scrollTop0 = $scroller.scrollTop();
|
|
1724
|
+
var atTop = scrollTop0 < 1;
|
|
1725
|
+
var atBottom = Math.abs(scrollTop0 - scrollHeight) < 1;
|
|
1721
1726
|
|
|
1722
|
-
var scrollWidth
|
|
1723
|
-
var
|
|
1724
|
-
var
|
|
1727
|
+
var scrollWidth = $scroller.prop('scrollWidth') - $scroller.prop("clientWidth");
|
|
1728
|
+
var scrollLeft0 = $scroller.scrollLeft();
|
|
1729
|
+
var atLeft = scrollLeft0 < 1;
|
|
1730
|
+
var atRight = Math.abs(scrollLeft0 - scrollWidth) < 1;
|
|
1725
1731
|
|
|
1726
1732
|
var mouseAction = $(scroller).data("autoscroll-mouse-action");
|
|
1727
1733
|
if (mouseAction == undefined) mouseAction = Sticky.get("autoscroll_mouse_action");
|