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)
|
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>
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user