From 6af31d3e2c534463f87ff0d153a320e4fd36f7c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez=20G=C3=B3mez?=
 <martin.gonzalez.gomez@nytimes.com>
Date: Sun, 3 Dec 2023 14:45:37 -0500
Subject: [PATCH 1/2] Use position sticky

---
 Scroller.svelte | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/Scroller.svelte b/Scroller.svelte
index b2285c2..de95c2f 100644
--- a/Scroller.svelte
+++ b/Scroller.svelte
@@ -83,7 +83,6 @@
 	let left;
 	let sections;
 	let wh = 0;
-	let fixed;
 	let offset_top = 0;
 	let width = 1;
 	let height;
@@ -96,14 +95,10 @@
 	$: (top, bottom, threshold, parallax, update());
 
 	$: style = `
-		position: ${fixed ? 'fixed' : 'absolute'};
-		top: 0;
 		transform: translate(0, ${offset_top}px);
 		z-index: ${inverted ? 3 : 1};
 	`;
 
-	$: widthStyle = fixed ? `width:${width}px;` : '';
-
 	onMount(() => {
 		sections = foreground.querySelectorAll(query);
 		count = sections.length;
@@ -138,17 +133,14 @@
 
 		if (progress <= 0) {
 			offset_top = 0;
-			fixed = false;
 		} else if (progress >= 1) {
 			offset_top = parallax
 				? (foreground_height - background_height)
 				: (foreground_height - available_space);
-			fixed = false;
 		} else {
 			offset_top = parallax ?
 				Math.round(top_px - progress * (background_height - available_space)) :
 				top_px;
-			fixed = true;
 		}
 
 		for (let i = 0; i < sections.length; i++) {
@@ -170,7 +162,7 @@
 <svelte:window bind:innerHeight={wh}/>
 
 <svelte-scroller-outer bind:this={outer}>
-	<svelte-scroller-background-container class='background-container' style="{style}{widthStyle}">
+	<svelte-scroller-background-container class='background-container' style="{style}">
 		<svelte-scroller-background bind:this={background}>
 			<slot name="background"></slot>
 		</svelte-scroller-background>
@@ -207,7 +199,8 @@
 
 	svelte-scroller-background-container {
 		display: block;
-		position: absolute;
+		position: sticky;
+		top: 0;
 		width: 100%;
 		max-width: 100%;
 		pointer-events: none;

From 0836315082c600b4564ad57eb0fa76e93c92dd9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez=20G=C3=B3mez?=
 <martin.gonzalez.gomez@nytimes.com>
Date: Sun, 3 Dec 2023 15:47:47 -0500
Subject: [PATCH 2/2] Fix positioning on load

---
 Scroller.svelte | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/Scroller.svelte b/Scroller.svelte
index de95c2f..d946fd7 100644
--- a/Scroller.svelte
+++ b/Scroller.svelte
@@ -95,7 +95,7 @@
 	$: (top, bottom, threshold, parallax, update());
 
 	$: style = `
-		transform: translate(0, ${offset_top}px);
+		top: ${offset_top || top_px}px;
 		z-index: ${inverted ? 3 : 1};
 	`;
 
@@ -131,16 +131,8 @@
 		const available_space = bottom_px - top_px;
 		progress = (top_px - fg.top) / (foreground_height - available_space);
 
-		if (progress <= 0) {
-			offset_top = 0;
-		} else if (progress >= 1) {
-			offset_top = parallax
-				? (foreground_height - background_height)
-				: (foreground_height - available_space);
-		} else {
-			offset_top = parallax ?
-				Math.round(top_px - progress * (background_height - available_space)) :
-				top_px;
+		if (parallax) {
+			offset_top = Math.round(top_px - progress * (background_height - available_space));
 		}
 
 		for (let i = 0; i < sections.length; i++) {
@@ -162,8 +154,8 @@
 <svelte:window bind:innerHeight={wh}/>
 
 <svelte-scroller-outer bind:this={outer}>
-	<svelte-scroller-background-container class='background-container' style="{style}">
-		<svelte-scroller-background bind:this={background}>
+	<svelte-scroller-background-container class='background-container'>
+		<svelte-scroller-background bind:this={background} style="{style}">
 			<slot name="background"></slot>
 		</svelte-scroller-background>
 	</svelte-scroller-background-container>
@@ -181,7 +173,8 @@
 
 	svelte-scroller-background {
 		display: block;
-		position: relative;
+		position: sticky;
+		top: 0;
 		width: 100%;
 	}
 
@@ -199,9 +192,10 @@
 
 	svelte-scroller-background-container {
 		display: block;
-		position: sticky;
+		position: absolute;
 		top: 0;
 		width: 100%;
+		height: 100%;
 		max-width: 100%;
 		pointer-events: none;
 		/* height: 100%; */