@glitchr/stickyjs 1.2.1 → 1.2.2

package/README.md

@@ -1,5 +1,20 @@
 # Sticky JS library
 
+## The address follows the reading
+
+With `replacehash` on (the default), the page's address carries the `#id` of
+the headline being read: `.sticky-headlines[id]`, any `[id]` inside a
+`.sticky-headlines`, or a `.sticky-magnet[id]` (`.sticky-headlines-skip` left
+out). A headline is being read once it has reached where its own link would
+land it - the scroller's `scroll-padding-top` plus the headline's
+`scroll-margin-top` - and until it has scrolled out of sight. At the top, with
+none reached, the address has no hash. The change is a `history.replaceState`:
+it adds nothing to the history.
+
+```html
+<section id="menus" class="sticky-headlines" style="scroll-margin-top: 4rem">…</section>
+```
+
 ## Scroll stops
 
 `src/js/stops.js` - places on the page a scroll settles on, once it has come

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glitchr/stickyjs",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Sticky scroll library",
   "main": "src/index.js",
   "repository": {

package/src/js/sticky.js

@@ -1173,7 +1173,13 @@ $.fn.serializeObject = function () {
 
             var elAll = $(ids).filter(function() {
                 if(this === $(Settings.identifier)) return false;
-                return this.getBoundingClientRect().top < scrollPaddingTop;
+                // Reached where an anchor jump would land it: the scroller's
+                // scroll-padding-top plus the headline's own scroll-margin-top
+                // (a section that lands under a fixed header, a band lower
+                // than the rest). Without the margin, a headline landed on
+                // by its own link was not the current one yet.
+                var margin = parseFloat(getComputedStyle(this).scrollMarginTop) || 0;
+                return this.getBoundingClientRect().top - margin < scrollPaddingTop;
             }).toArray().sort(function (el1, el2) {
                 return el1.offsetTop > el2.offsetTop ? -1
                     : (el1.offsetTop < el2.offsetTop ?  1 : 0);

package/src/js/stops.js

@@ -19,7 +19,8 @@
 //
 // A band never reaches past halfway to the neighbouring stop, so every stop
 // stays reachable however the bands are set. Two stops at the same place are
-// one stop.
+// one stop. A stop past the end of the scroll (a footer shorter than the
+// screen) is at the end of the scroll.
 //
 // Nothing happens during the scroll. Acting at the first movement fights
 // trackpad momentum, which keeps pushing during and after the glide; and the
@@ -178,6 +179,13 @@
         return this.isWindow ? (window.scrollY || window.pageYOffset || 0) : this.scroller.scrollTop;
     };
 
+    /** The furthest the scroller can scroll. */
+    Stops.prototype.max = function () {
+        return Math.max(0, this.isWindow
+            ? document.documentElement.scrollHeight - window.innerHeight
+            : this.scroller.scrollHeight - this.scroller.clientHeight);
+    };
+
     /** The scroller's scroll-padding-top: where a stop should rest below its edge. */
     Stops.prototype.padding = function () {
         var value = parseFloat(getComputedStyle(this.root).scrollPaddingTop);
@@ -193,6 +201,7 @@
     Stops.prototype.measure = function () {
         var options = this.options;
         var elements = this.root.querySelectorAll(options.selector);
+        var max = this.max();
         var stops = [];
         var i;
 
@@ -201,7 +210,11 @@
             if (!el.getClientRects().length) continue; // display: none
             stops.push({
                 element: el,
-                top: Math.round(this.position(el)),
+                // A stop the scroll cannot bring to the top (a footer shorter
+                // than the screen) rests where the scroll ends. Taken as out
+                // of reach, it made every scroll up from the very bottom -
+                // Safari's bounce included - glide away to the stop above.
+                top: Math.min(Math.round(this.position(el)), max),
                 bandUp: Math.max(0, toPixels(el.dataset.stickyBandUp, el, options.bandUp)),
                 bandDown: Math.max(0, toPixels(el.dataset.stickyBandDown, el, options.bandDown))
             });