unitaryfund / unitary.fund

πŸ•ΈοΈ πŸ’› Unitary Fund Website πŸ’› πŸ•ΈοΈ
https://unitary.fund
46 stars 54 forks source link

Fix Filter Placement on Mobile When Scrolling #440

Closed andre-a-alves closed 3 months ago

andre-a-alves commented 4 months ago

Fixes #363

Affected Pages

Summary of Changes

MR changes the behavior of the filter on the mobile version of the page. When the user scrolls far enough that the header is no longer visible, the filter will move to the top of the screen and stay there. If the user scrolls back to the top, the filter will move back down so the header is visible.

The drawback of this approach is that a gap remains visible for the short scroll portion (37 pixels) closest to the top. However, it is a simple approach that should not affect website performance on older devices as much as a pixel-by-pixel change would.

New Behavior:

After scrolling: Screenshot_20240223_065330 Screenshot_20240223_065926

While on top: Screenshot_20240223_065550

Old Behavior (unchanged for top 37 pixels):

Visible Gap: Screenshot_20240223_065444

vercel[bot] commented 4 months ago

The latest updates on your projects. Learn more about Vercel for Git β†—οΈŽ

Name Status Preview Updated (UTC)
unitary-fund-prel βœ… Ready (Inspect) Visit Preview Feb 23, 2024 6:01am
willzeng commented 4 months ago

Thanks @andre-a-alves !