fix: prevent sidebar from jumping when in START or UNFIXED state (#14)

* fix: prevent jumping when in START state * fix: prevent jumping when in UNFIXED state
vursen · Nov 28, 2021 · 2f73fc8 · 2f73fc8
1 parent 7283b86
commit 2f73fc8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/src/fsm-transitions.js b/src/fsm-transitions.js
@@ -6,7 +6,8 @@ export default {
       to: states.FINISH,
       when: (d) => [
         d.isSideInnerWithinPath === true,
-        d.viewportTop + d.sideInnerHeight > d.finishPoint
+        d.viewportTop + d.sideInnerHeight + d.bottomSpacing > d.finishPoint,
+        d.viewportBottom > d.finishPoint
       ]
     },
     {
@@ -60,7 +61,7 @@ export default {
     },
     {
       to: states.FINISH,
-      when: (d) => [d.viewportTop + d.sideInnerHeight > d.finishPoint]
+      when: (d) => [d.viewportBottom > d.finishPoint]
     },
     {
       to: states.TOP_FIXED,

diff --git a/test/transitions.test.js b/test/transitions.test.js
@@ -205,7 +205,7 @@ describe('transitions', function() {
     // isSideInnerWithinPath === true
     describe('when height(content) > height(sidebarInner)', () => {
       beforeEach(async () => {
-        setContentHeight(sidebarInnerHeight * 2);
+        setContentHeight(sidebarInnerHeight * 1.5);
         await nextFrame();
       });
 
@@ -220,7 +220,7 @@ describe('transitions', function() {
         await forceUpdate();
         expectTransitionTo(BOTTOM_FIXED);
 
-        setContentHeight(sidebarInnerHeight / 2);
+        setContentHeight(sidebarInnerHeight / 1.5);
         await forceUpdate();
         expectTransitionTo(START);
       });
@@ -274,7 +274,7 @@ describe('transitions', function() {
         await forceUpdate();
         expectTransitionTo(UNFIXED);
 
-        setContentHeight(sidebarInnerHeight / 2);
+        setContentHeight(sidebarInnerHeight / 1.5);
         await forceUpdate();
         expectTransitionTo(START);
       });
@@ -408,7 +408,7 @@ describe('transitions', function() {
       });
 
       it('START => FINISH', async () => {
-        await scrollTo(getElementBottom(contentElement) - window.innerHeight);
+        await scrollTo(getElementBottom(contentElement) - window.innerHeight + 1);
         await forceUpdate();
         expectTransitionTo(FINISH);
       });