Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: sticky-container class

Browse Source
This commit is contained in:
freeplay 2023-07-20 19:14:13 -04:00
parent fa55fa5e44
commit 942efb635e
1 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/client/src/components/global/MkStickyContainer.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="rootEl"> <div class="sticky-container">
<div ref="headerEl"> <div ref="headerEl">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
@ -19,7 +19,6 @@ const CURRENT_STICKY_TOP = "CURRENT_STICKY_TOP";
import type { Ref } from "vue"; import type { Ref } from "vue";
import { inject, onMounted, onUnmounted, provide, ref, watch } from "vue"; import { inject, onMounted, onUnmounted, provide, ref, watch } from "vue";
const rootEl = $ref<HTMLElement>();
const headerEl = $ref<HTMLElement>(); const headerEl = $ref<HTMLElement>();
const bodyEl = $ref<HTMLElement>(); const bodyEl = $ref<HTMLElement>();
@ -54,10 +53,6 @@ onMounted(() => {
}, },
); );
headerEl.style.position = "sticky";
headerEl.style.top = "var(--stickyTop, 0)";
headerEl.style.zIndex = "1000";
observer.observe(headerEl); observer.observe(headerEl);
}); });
@ -66,4 +61,19 @@ onUnmounted(() => {
}); });
</script> </script>
<style lang="scss" module></style> <style lang="scss">
.sticky-container {
display: flex;
flex-direction: column;
> div:first-child {
position: sticky;
top: var(--stickyTop, 0);
z-index: 1000;
}
> div:last-child {
display: flex;
flex-direction: column;
flex-grow: 1;
}
}
</style>