diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss index 61f654b..c9a9886 100644 --- a/src/styles/markdown.scss +++ b/src/styles/markdown.scss @@ -171,7 +171,6 @@ box-shadow: rgba(0,0,0,0.1) 0 2px 12px 0; width: 285px; top: 70px; - //bottom: 20px; overflow: auto; float: right; position: fixed; @@ -182,6 +181,15 @@ -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; + .toc-content { + position: sticky; + top: 0; + z-index: 1; + box-shadow: -4px -9px 20px #000; + -webkit-backdrop-filter: saturate(360%) blur(8px); + backdrop-filter: saturate(360%) blur(8px); + background-color: rgba(255,255,255,0.72); + } } ::-webkit-scrollbar { /*滚动条整体样式*/ diff --git a/src/views/public/article/index.vue b/src/views/public/article/index.vue index a0c716e..950eb1d 100644 --- a/src/views/public/article/index.vue +++ b/src/views/public/article/index.vue @@ -30,7 +30,7 @@
-
+
目录
@@ -67,6 +67,7 @@ titleList: [], tocMaxHeight: 500, befterScrollTop: 0, + maxMenuHeight: document.documentElement.clientHeight - 155 } }, mounted() { @@ -74,7 +75,10 @@ this.getMarkDown() this.showList = false } - + let that = this + window.onresize = function temp() { + that.maxMenuHeight= document.documentElement.clientHeight - 155 + } }, methods: { onScroll() {