fix(doc): sidebar covers nav when scrolling (#11468)

This commit is contained in:
wChenonly 2023-01-14 21:50:07 +08:00 committed by GitHub
parent 92d622aa82
commit 13629b2070
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 12 deletions

View File

@ -172,6 +172,8 @@ export default {
width: 100%; width: 100%;
background-color: var(--van-doc-header-background); background-color: var(--van-doc-header-background);
user-select: none; user-select: none;
position: relative;
z-index: 2;
&__top { &__top {
display: flex; display: flex;

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="van-doc-nav" :style="style"> <div :class="['van-doc-nav', { 'van-doc-nav-fixed': isFixed }]">
<div <div
v-for="(group, index) in navConfig" v-for="(group, index) in navConfig"
class="van-doc-nav__group" class="van-doc-nav__group"
@ -38,19 +38,11 @@ export default {
data() { data() {
return { return {
top: 64, isFixed: false,
bottom: 0,
}; };
}, },
computed: { computed: {
style() {
return {
top: this.top + 'px',
bottom: this.bottom + 'px',
};
},
base() { base() {
return this.lang ? `/${this.lang}/` : '/'; return this.lang ? `/${this.lang}/` : '/';
}, },
@ -64,7 +56,7 @@ export default {
methods: { methods: {
onScroll() { onScroll() {
const { pageYOffset: offset } = window; const { pageYOffset: offset } = window;
this.top = Math.max(0, 64 - offset); this.isFixed = offset > 64;
}, },
}, },
}; };
@ -72,8 +64,10 @@ export default {
<style lang="less"> <style lang="less">
.van-doc-nav { .van-doc-nav {
position: fixed; position: absolute;
left: 0; left: 0;
top: var(--van-doc-header-top-height);
bottom: 0;
z-index: 1; z-index: 1;
min-width: var(--van-doc-nav-width); min-width: var(--van-doc-nav-width);
max-width: var(--van-doc-nav-width); max-width: var(--van-doc-nav-width);
@ -86,6 +80,10 @@ export default {
margin-left: calc((var(--van-doc-row-max-width) / 2 * -1)); margin-left: calc((var(--van-doc-row-max-width) / 2 * -1));
} }
&.van-doc-nav-fixed {
position: fixed;
top: 0;
}
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 6px; width: 6px;
height: 6px; height: 6px;