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)
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>

View File

@@ -27,13 +27,6 @@
max-width: 524px;
}
}
// Passed scroll
&.is-passed {
@include bp (sm) {
padding-bottom: 72px;
}
}
}
// Content Block
@@ -394,26 +387,6 @@
/*
** 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
&.is-visible {
transform: translate3d(0,0,0);