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:
@@ -39,19 +39,11 @@
|
||||
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
let photosContentEl: HTMLElement
|
||||
let photosGridEl: HTMLElement
|
||||
let observerPhotos: IntersectionObserver
|
||||
let mutationPhotos: MutationObserver
|
||||
let scrollY: 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(() => {
|
||||
/**
|
||||
* Observers
|
||||
@@ -336,20 +297,14 @@
|
||||
|
||||
|
||||
<main class="photos-page">
|
||||
<section class="photos-page__intro"
|
||||
class:is-passed={scrolledPastIntro}
|
||||
>
|
||||
<section class="photos-page__intro">
|
||||
<ScrollingTitle tag="h1" text="Houses">
|
||||
<SplitText text="Houses" mode="chars" />
|
||||
</ScrollingTitle>
|
||||
|
||||
<DiscoverText />
|
||||
|
||||
<div class="filters"
|
||||
class:is-over={filtersOver}
|
||||
class:is-transitioning={filtersTransitioning}
|
||||
class:is-visible={filtersVisible}
|
||||
>
|
||||
<div class="filters">
|
||||
<div class="filters__bar">
|
||||
<span class="text-label filters__label">Filter photos</span>
|
||||
<ul>
|
||||
@@ -425,7 +380,7 @@
|
||||
</div>
|
||||
</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">
|
||||
{#if photos}
|
||||
<div class="photos-page__grid" bind:this={photosGridEl} data-sveltekit-noscroll>
|
||||
|
||||
Reference in New Issue
Block a user