Tweak UI
This commit is contained in:
parent
930127348a
commit
e404e5e2de
3 changed files with 6 additions and 6 deletions
|
@ -98,11 +98,10 @@ export default defineComponent({
|
||||||
> header {
|
> header {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 10;
|
||||||
// TODO
|
position: sticky;
|
||||||
// position: sticky;
|
top: var(--stickyTop, 0px);
|
||||||
// top: var(--stickyTopOffset);
|
backdrop-filter: blur(20px);
|
||||||
// backdrop-filter: blur(20px);
|
|
||||||
|
|
||||||
> .title {
|
> .title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
@ -5,7 +5,7 @@ export default {
|
||||||
//const query = binding.value;
|
//const query = binding.value;
|
||||||
|
|
||||||
const header = src.children[0];
|
const header = src.children[0];
|
||||||
const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop');
|
const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop') || '0px';
|
||||||
src.style.setProperty('--stickyTop', `${parseInt(currentStickyTop) + header.offsetHeight}px`);
|
src.style.setProperty('--stickyTop', `${parseInt(currentStickyTop) + header.offsetHeight}px`);
|
||||||
header.style.setProperty('--stickyTop', currentStickyTop);
|
header.style.setProperty('--stickyTop', currentStickyTop);
|
||||||
header.style.position = 'sticky';
|
header.style.position = 'sticky';
|
||||||
|
|
|
@ -259,6 +259,7 @@ export default defineComponent({
|
||||||
> .contents {
|
> .contents {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
--stickyTop: #{$header-height};
|
||||||
|
|
||||||
&.withHeader {
|
&.withHeader {
|
||||||
padding-top: $header-height;
|
padding-top: $header-height;
|
||||||
|
|
Loading…
Reference in a new issue