@glitchr/stickyjs 1.0.39 → 1.0.42
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 +63 -56
package/package.json
CHANGED
package/src/js/sticky.js
CHANGED
|
@@ -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;
|
|
@@ -1200,7 +1202,8 @@ $.fn.serializeObject = function () {
|
|
|
1200
1202
|
|
|
1201
1203
|
$(e.target).find(".sticky-top").each(function() {
|
|
1202
1204
|
|
|
1203
|
-
|
|
1205
|
+
const $this = $(this);
|
|
1206
|
+
var scrollhide = $this.attr("aria-scrollhide") || Sticky.get("scrollhide");
|
|
1204
1207
|
scrollhide = scrollhide === "false" ? false : scrollhide;
|
|
1205
1208
|
|
|
1206
1209
|
var that = this;
|
|
@@ -1209,10 +1212,10 @@ $.fn.serializeObject = function () {
|
|
|
1209
1212
|
var isAnchor = Sticky.epsilon(e.scrollY.top, anchorY);
|
|
1210
1213
|
if(e.first || isAnchor) {
|
|
1211
1214
|
|
|
1212
|
-
$
|
|
1213
|
-
$
|
|
1215
|
+
$this.addClass("show");
|
|
1216
|
+
$this.removeAttr("style");
|
|
1214
1217
|
|
|
1215
|
-
} else if(e.scrollY.top > this.clientHeight || $
|
|
1218
|
+
} else if(e.scrollY.top > this.clientHeight || $this.hasClass("show")) {
|
|
1216
1219
|
|
|
1217
1220
|
// Prevent element shaking
|
|
1218
1221
|
if(Sticky.get("transition") && Sticky.get("transition").indexOf(this) !== -1) return;
|
|
@@ -1222,61 +1225,61 @@ $.fn.serializeObject = function () {
|
|
|
1222
1225
|
// Action element
|
|
1223
1226
|
if(e.scrollY.delta < 0 && e.scrollY.bottom > 0) {
|
|
1224
1227
|
|
|
1225
|
-
$
|
|
1226
|
-
$
|
|
1227
|
-
if(!e.first) $
|
|
1228
|
+
$this.addClass("show");
|
|
1229
|
+
$this.removeAttr("style");
|
|
1230
|
+
if(!e.first) $this.removeClass("skip-transition");
|
|
1228
1231
|
|
|
1229
1232
|
} else if(e.scrollY.delta > 0){
|
|
1230
1233
|
|
|
1231
|
-
var borderThickness = parseInt($
|
|
1232
|
-
+ parseInt($
|
|
1234
|
+
var borderThickness = parseInt($this.css("border-bottom-width"))
|
|
1235
|
+
+ parseInt($this.css("border-top-width"));
|
|
1233
1236
|
|
|
1234
|
-
$
|
|
1235
|
-
$
|
|
1237
|
+
$this.removeClass("show");
|
|
1238
|
+
$this.css("top", -this.clientHeight-borderThickness);
|
|
1236
1239
|
if(e.scrollY.top == e.scrollY.delta && !e.first)
|
|
1237
|
-
$
|
|
1240
|
+
$this.addClass("skip-transition");
|
|
1238
1241
|
}
|
|
1239
1242
|
|
|
1240
1243
|
} else { // Smooth transition
|
|
1241
1244
|
|
|
1242
1245
|
Sticky.remove("transition", this);
|
|
1243
1246
|
|
|
1244
|
-
$
|
|
1247
|
+
$this.css("top", Math.min(0,-e.scrollY.top));
|
|
1245
1248
|
if(e.scrollY.top > 0 && !e.first)
|
|
1246
|
-
$
|
|
1249
|
+
$this.addClass("skip-transition");
|
|
1247
1250
|
}
|
|
1248
1251
|
}
|
|
1249
1252
|
|
|
1250
1253
|
var style = window.getComputedStyle(this);
|
|
1251
|
-
var scroller = $
|
|
1252
|
-
var scrollcatchPos = $
|
|
1253
|
-
var scrollcatchClone = $
|
|
1254
|
+
var scroller = $this.closestScrollable()[0];
|
|
1255
|
+
var scrollcatchPos = $this.attr("aria-scrollcatch-pos");
|
|
1256
|
+
var scrollcatchClone = $this.attr("aria-scrollcatch-clone");
|
|
1254
1257
|
|
|
1255
1258
|
if(!e.scrollT.elastic) {
|
|
1256
1259
|
|
|
1257
1260
|
if(style["position"] !== "fixed" && !scrollcatchClone) {
|
|
1258
1261
|
|
|
1259
|
-
var scrollcatch = $
|
|
1262
|
+
var scrollcatch = $this.attr("aria-scrollcatch") || Sticky.get("scrollcatch");
|
|
1260
1263
|
scrollcatch = scrollcatch === true ? style["z-index"] : scrollcatch;
|
|
1261
1264
|
|
|
1262
1265
|
if (scrollcatch !== false && this.offsetTop <= scroller.scrollTop) {
|
|
1263
1266
|
|
|
1264
|
-
var that = $
|
|
1267
|
+
var that = $this.clone().removeAttr("id")
|
|
1265
1268
|
.attr("aria-scrollcatch-clone", true);
|
|
1266
1269
|
|
|
1267
|
-
$
|
|
1270
|
+
$this.addClass("caught")
|
|
1268
1271
|
.attr("aria-scrollcatch-pos", scroller.scrollTop+1)
|
|
1269
1272
|
.attr("aria-labelledby", $(that).uniqueId().attr("id"));
|
|
1270
1273
|
|
|
1271
|
-
$(that).insertBefore($
|
|
1274
|
+
$(that).insertBefore($this.css("position", "fixed").css("z-index", scrollcatch));
|
|
1272
1275
|
}
|
|
1273
1276
|
|
|
1274
1277
|
} else if(scrollcatchPos > scroller.scrollTop) {
|
|
1275
1278
|
|
|
1276
|
-
var that = $("#"+$
|
|
1279
|
+
var that = $("#"+$this.attr("aria-labelledby"));
|
|
1277
1280
|
$(that).remove();
|
|
1278
1281
|
|
|
1279
|
-
$
|
|
1282
|
+
$this.removeClass("caught").css("position", "").css("z-index" , "")
|
|
1280
1283
|
.removeAttr("aria-scrollcatch-pos");
|
|
1281
1284
|
}
|
|
1282
1285
|
}
|
|
@@ -1285,51 +1288,52 @@ $.fn.serializeObject = function () {
|
|
|
1285
1288
|
$(e.target).find(".sticky-bottom").each(function() {
|
|
1286
1289
|
|
|
1287
1290
|
if(!Sticky.get("scrollhide")) return;
|
|
1291
|
+
const $this = $(this);
|
|
1288
1292
|
var threshold = 1000*Sticky.parseDuration(Sticky.get("threshold"));
|
|
1289
1293
|
var scrollHint = Math.min(1, Math.max(0, parseFloat(Sticky.get("scrollhint"))));
|
|
1290
|
-
var hasHint = $
|
|
1294
|
+
var hasHint = $this.hasClass("hint");
|
|
1291
1295
|
|
|
1292
1296
|
if(e.reset) hasReset = true;
|
|
1293
1297
|
if(scrollHint) {
|
|
1294
1298
|
|
|
1295
1299
|
if(!e.scrollY.bottomElastic) {
|
|
1296
|
-
$
|
|
1297
|
-
$
|
|
1300
|
+
$this.removeClass("hint");
|
|
1301
|
+
$this.off("click.hint");
|
|
1298
1302
|
hasReset = false;
|
|
1299
1303
|
}
|
|
1300
1304
|
|
|
1301
1305
|
if(e.scrollT.delta.bottom > scrollHint*threshold && !hasHint) {
|
|
1302
|
-
$
|
|
1303
|
-
$
|
|
1306
|
+
$this.addClass("hint");
|
|
1307
|
+
$this.on("click.hint", function() { $(this).removeClass("hint").addClass("show"); });
|
|
1304
1308
|
hasReset = false;
|
|
1305
1309
|
}
|
|
1306
1310
|
}
|
|
1307
1311
|
|
|
1308
1312
|
threshold = hasReset && hasHint ? (1-scrollHint) * threshold : threshold;
|
|
1309
|
-
if($
|
|
1313
|
+
if($this.hasClass("show")) {
|
|
1310
1314
|
|
|
1311
|
-
$
|
|
1315
|
+
$this.off("click.hint");
|
|
1312
1316
|
|
|
1313
1317
|
// Action element
|
|
1314
1318
|
if (e.scrollY.bottom > this.clientHeight || e.scrollT.delta.top > threshold) {
|
|
1315
1319
|
|
|
1316
|
-
$
|
|
1317
|
-
$
|
|
1318
|
-
$
|
|
1319
|
-
$
|
|
1320
|
+
$this.removeClass("show");
|
|
1321
|
+
$this.removeClass("hint");
|
|
1322
|
+
$this.removeClass("skip-transition");
|
|
1323
|
+
$this.removeAttr("style");
|
|
1320
1324
|
|
|
1321
1325
|
} else { // Smooth transition
|
|
1322
1326
|
|
|
1323
|
-
$
|
|
1324
|
-
$
|
|
1325
|
-
if(e.scrollY.bottom > 0) $
|
|
1327
|
+
$this.css("bottom", Math.min(0, -e.scrollY.bottom));
|
|
1328
|
+
$this.css("position", Sticky.get("scrollcatch"));
|
|
1329
|
+
if(e.scrollY.bottom > 0) $this.addClass("skip-transition");
|
|
1326
1330
|
}
|
|
1327
1331
|
|
|
1328
1332
|
} else if(e.scrollT.delta.bottom > threshold) {
|
|
1329
1333
|
|
|
1330
|
-
$
|
|
1331
|
-
$
|
|
1332
|
-
$
|
|
1334
|
+
$this.off("click.hint");
|
|
1335
|
+
$this.addClass("show").removeClass("hint");
|
|
1336
|
+
$this.removeAttr("style");
|
|
1333
1337
|
}
|
|
1334
1338
|
});
|
|
1335
1339
|
|
|
@@ -1426,7 +1430,7 @@ $.fn.serializeObject = function () {
|
|
|
1426
1430
|
if(extraEaseOut < 0) extraEaseOut = Math.max(extraEaseOut, -this.clientHeight);
|
|
1427
1431
|
|
|
1428
1432
|
// ease-in-out should not overlap
|
|
1429
|
-
if(Math.sign(extraEaseIn) == Math.sign(
|
|
1433
|
+
if(Math.sign(extraEaseIn) == Math.sign(extraEaseOut)) {
|
|
1430
1434
|
if(extraEaseIn < 0) extraEaseOut = Math.min(extraEaseOut, extraEaseIn);
|
|
1431
1435
|
else extraEaseOut = Math.max(extraEaseOut, extraEaseIn);
|
|
1432
1436
|
}
|
|
@@ -1438,7 +1442,7 @@ $.fn.serializeObject = function () {
|
|
|
1438
1442
|
// Y = 0 : viewport bottom = element top
|
|
1439
1443
|
var bottom = this.offsetTop+this.clientHeight - (e.scrollY.top);
|
|
1440
1444
|
|
|
1441
|
-
var isBiggerThanViewport = (e.screen.vh < this.
|
|
1445
|
+
var isBiggerThanViewport = (e.screen.vh < this.clientHeight);
|
|
1442
1446
|
var show = $(this).hasClass("show");
|
|
1443
1447
|
var easeIn = $(this).hasClass("sticky-easein") && extraEaseIn !== undefined && !show;
|
|
1444
1448
|
var easeOut = $(this).hasClass("sticky-easeout") && extraEaseOut !== undefined && show;
|
|
@@ -1715,13 +1719,16 @@ $.fn.serializeObject = function () {
|
|
|
1715
1719
|
var thresholdMinY = $(scroller).data("autoscroll-minheight");
|
|
1716
1720
|
if(thresholdMinY == undefined) thresholdMinY = Sticky.get("autoscroll_minheight");
|
|
1717
1721
|
|
|
1718
|
-
var
|
|
1719
|
-
var
|
|
1720
|
-
var
|
|
1722
|
+
var $scroller = $(scroller);
|
|
1723
|
+
var scrollHeight = $scroller.prop('scrollHeight') - $scroller.prop("clientHeight");
|
|
1724
|
+
var scrollTop0 = $scroller.scrollTop();
|
|
1725
|
+
var atTop = scrollTop0 < 1;
|
|
1726
|
+
var atBottom = Math.abs(scrollTop0 - scrollHeight) < 1;
|
|
1721
1727
|
|
|
1722
|
-
var scrollWidth
|
|
1723
|
-
var
|
|
1724
|
-
var
|
|
1728
|
+
var scrollWidth = $scroller.prop('scrollWidth') - $scroller.prop("clientWidth");
|
|
1729
|
+
var scrollLeft0 = $scroller.scrollLeft();
|
|
1730
|
+
var atLeft = scrollLeft0 < 1;
|
|
1731
|
+
var atRight = Math.abs(scrollLeft0 - scrollWidth) < 1;
|
|
1725
1732
|
|
|
1726
1733
|
var mouseAction = $(scroller).data("autoscroll-mouse-action");
|
|
1727
1734
|
if (mouseAction == undefined) mouseAction = Sticky.get("autoscroll_mouse_action");
|