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 { | ||||
| 		display: flex; | ||||
| 		position: relative; | ||||
| 		z-index: 2; | ||||
| 		// TODO | ||||
| 		// position: sticky; | ||||
| 		// top: var(--stickyTopOffset); | ||||
| 		// backdrop-filter: blur(20px); | ||||
| 		z-index: 10; | ||||
| 		position: sticky; | ||||
| 		top: var(--stickyTop, 0px); | ||||
| 		backdrop-filter: blur(20px); | ||||
| 
 | ||||
| 		> .title { | ||||
| 			margin: 0; | ||||
|  |  | |||
|  | @ -5,7 +5,7 @@ export default { | |||
| 		//const query = binding.value;
 | ||||
| 
 | ||||
| 		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`); | ||||
| 		header.style.setProperty('--stickyTop', currentStickyTop); | ||||
| 		header.style.position = 'sticky'; | ||||
|  |  | |||
|  | @ -259,6 +259,7 @@ export default defineComponent({ | |||
| 	> .contents { | ||||
| 		width: 100%; | ||||
| 		min-width: 0; | ||||
| 		--stickyTop: #{$header-height}; | ||||
| 
 | ||||
| 		&.withHeader { | ||||
| 			padding-top: $header-height; | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue