Sticky offset

2 files changed, 9 insertions, 2 deletions

diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index a76f6e8..2744510 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -30,14 +30,19 @@
                 min-inline-size: props.get(vars.$panel--side-25--min);
             }
 
-            @include bem.modifier('sticky') {
+            @include bem.modifier('sticky-0') {
                 position:          sticky;
                 inset-block-start: 0;
             }
 
+            @include bem.modifier('sticky') {
+                position:          sticky;
+                inset-block-start: props.get(vars.$panel--sticky-offset);
+            }
+
             @include bem.modifier('sticky-400') {
                 position:          sticky;
-                inset-block-start: props.get(vars.$panel--sticky-400--inset);
+                inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
             }
         }
 
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
index 8f6bf93..01562e1 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -8,3 +8,5 @@ $gapless: props.def(--l-split-view--gapless, 0) !default;
 
 $panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default;
 $panel--sticky-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default;
+
+$panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default;