fix: disable sticky state for Photo filters (temp)

it just doesn't really work anymore hey, needs a further research (duplicate it? as a component?)
This commit is contained in:
2023-10-31 12:59:42 +01:00
parent 710bb31f1b
commit f661bc23e5
2 changed files with 3 additions and 75 deletions

View File

@@ -39,19 +39,11 @@
dayjs.extend(relativeTime) dayjs.extend(relativeTime)
let photosContentEl: HTMLElement
let photosGridEl: HTMLElement let photosGridEl: HTMLElement
let observerPhotos: IntersectionObserver let observerPhotos: IntersectionObserver
let mutationPhotos: MutationObserver let mutationPhotos: MutationObserver
let scrollY: number let scrollY: number
let innerWidth: number, innerHeight: number let innerWidth: number, innerHeight: number
// Filters related
let scrollDirection = 0
let lastScrollTop = 0
let scrolledPastIntro: boolean
let filtersOver: boolean
let filtersVisible: boolean
let filtersTransitioning: boolean
/** /**
@@ -222,37 +214,6 @@
} }
/**
* Scroll detection when entering content
*/
$: if (scrollY) {
// Detect scroll direction
throttle(() => {
scrollDirection = scrollY > lastScrollTop ? 1 : -1
lastScrollTop = scrollY
// Show filters bar when scrolling back up
filtersVisible = scrollDirection < 0
// Scrolled past grid of photos
if (scrollY > photosContentEl.offsetTop) {
if (!scrolledPastIntro) {
filtersOver = true
// Hacky: Set filters as transitioning after a little delay to avoid an transition jump
setTimeout(() => filtersTransitioning = true, 30)
}
scrolledPastIntro = true
} else {
if (scrolledPastIntro) {
filtersOver = false
filtersTransitioning = false
}
scrolledPastIntro = false
}
}, 200)()
}
onMount(() => { onMount(() => {
/** /**
* Observers * Observers
@@ -336,20 +297,14 @@
<main class="photos-page"> <main class="photos-page">
<section class="photos-page__intro" <section class="photos-page__intro">
class:is-passed={scrolledPastIntro}
>
<ScrollingTitle tag="h1" text="Houses"> <ScrollingTitle tag="h1" text="Houses">
<SplitText text="Houses" mode="chars" /> <SplitText text="Houses" mode="chars" />
</ScrollingTitle> </ScrollingTitle>
<DiscoverText /> <DiscoverText />
<div class="filters" <div class="filters">
class:is-over={filtersOver}
class:is-transitioning={filtersTransitioning}
class:is-visible={filtersVisible}
>
<div class="filters__bar"> <div class="filters__bar">
<span class="text-label filters__label">Filter photos</span> <span class="text-label filters__label">Filter photos</span>
<ul> <ul>
@@ -425,7 +380,7 @@
</div> </div>
</section> </section>
<section class="photos-page__content" bind:this={photosContentEl} style:--margin-sides="{sideMargins}px"> <section class="photos-page__content" style:--margin-sides="{sideMargins}px">
<div class="grid container"> <div class="grid container">
{#if photos} {#if photos}
<div class="photos-page__grid" bind:this={photosGridEl} data-sveltekit-noscroll> <div class="photos-page__grid" bind:this={photosGridEl} data-sveltekit-noscroll>

View File

@@ -27,13 +27,6 @@
max-width: 524px; max-width: 524px;
} }
} }
// Passed scroll
&.is-passed {
@include bp (sm) {
padding-bottom: 72px;
}
}
} }
// Content Block // Content Block
@@ -394,26 +387,6 @@
/* /*
** States ** States
*/ */
// Fixed when scrolled pass intro
&.is-over {
--top: 24px;
transform: translate3d(0, calc(-100% - var(--top)), 0);
pointer-events: none;
.filters__bar {
pointer-events: auto;
box-shadow: 0 10px 20px rgba(#000, 0.1);
}
@include bp (sm) {
position: fixed;
z-index: 10;
top: var(--top);
left: 0;
right: 0;
}
}
// Visible when scrolling back up // Visible when scrolling back up
&.is-visible { &.is-visible {
transform: translate3d(0,0,0); transform: translate3d(0,0,0);