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