提交 2818038e 编写于 作者: D DCloud_LXH

fix: navbar search box add transition、toc top value

上级 7dc03744
...@@ -276,6 +276,7 @@ $navbar-horizontal-padding = 1.5rem ...@@ -276,6 +276,7 @@ $navbar-horizontal-padding = 1.5rem
position absolute position absolute
right $navbar-horizontal-padding right $navbar-horizontal-padding
top 0 //$navbar-vertical-padding top 0 //$navbar-vertical-padding
transition: top 0.1s ease 0s
display flex display flex
.search-box .search-box
flex: 0 0 auto flex: 0 0 auto
......
<template> <template>
<Sticker <Sticker
ref="sticker"
:class="['vuepress-toc', visible ? '' : 'table-of-contents']" :class="['vuepress-toc', visible ? '' : 'table-of-contents']"
v-bind="$attrs" v-bind="$attrs"
:style="{ top: initVisibleTop }"
> >
<h5>ON THIS PAGE</h5> <h5>ON THIS PAGE</h5>
<div <div
...@@ -36,8 +36,7 @@ ...@@ -36,8 +36,7 @@
}, },
data() { data() {
return { return {
activeIndex: 0, activeIndex: 0
initVisibleTop: '0px',
}; };
}, },
watch: { watch: {
...@@ -76,7 +75,7 @@ ...@@ -76,7 +75,7 @@
window.addEventListener('scroll', this._onScroll); window.addEventListener('scroll', this._onScroll);
// window.addEventListener('hashchange', this._onHashChange); // window.addEventListener('hashchange', this._onHashChange);
const sideBar = document.querySelector('.sidebar'); const sideBar = document.querySelector('.sidebar');
this.initVisibleTop = sideBar && sideBar.style && sideBar.style.top; this.$refs.sticker.$el.style.top = sideBar && sideBar.style && sideBar.style.top;
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener('scroll', this._onScroll); window.removeEventListener('scroll', this._onScroll);
...@@ -124,7 +123,7 @@ ...@@ -124,7 +123,7 @@
width $vuepress-toc-width width $vuepress-toc-width
overflow-y auto overflow-y auto
// margin-top $navbarHeight // margin-top $navbarHeight
top 0 top $navbarHeight
right 0 right 0
box-sizing border-box box-sizing border-box
background-color #fff background-color #fff
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册