d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-30 07:26:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

目录zIndex调整，封装导航隐藏函数，加入隐私协议链接

Browse Source
This commit is contained in:
tangly1024
2021-10-26 16:16:46 +08:00
parent 54b27aa368
commit 6258465203
3 changed files with 37 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
layouts/BaseLayout.js
View File

@@ -13,21 +13,11 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMe
let windowTop = 0
const scrollTrigger = useCallback(throttle(() => {
const scrollS = window.scrollY
const nav = document.querySelector('#sticky-nav')
const sidebar = document.querySelector('#sidebar')
const tagsBar = document.querySelector('#tags-bar')
const rightToc = document.querySelector('#right-toc')
if (scrollS >= windowTop && scrollS > 10) {
nav && nav.classList.replace('top-0', '-top-16')
tagsBar && tagsBar.classList.replace('top-16', 'top-0')
sidebar && sidebar.classList.replace('top-20', 'top-2')
rightToc && rightToc.classList.replace('top-16', 'top-0')
hiddenNav()
windowTop = scrollS
} else {
nav && nav.classList.replace('-top-16', 'top-0')
tagsBar && tagsBar.classList.replace('top-0', 'top-16')
sidebar && sidebar.classList.replace('top-2', 'top-20')
rightToc && rightToc.classList.replace('top-0', 'top-16')
showNav()
windowTop = scrollS
}
}, 200))
@@ -35,6 +25,7 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMe
// 监听滚动
useEffect(() => {
window.addEventListener('scroll', scrollTrigger)
scrollTrigger()
return () => {
window.removeEventListener('scroll', scrollTrigger)
}
@@ -62,6 +53,38 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, ...customMe
)
}
/**
* 隐藏导航
*/
const hiddenNav = () => {
if (document) {
const nav = document.querySelector('#sticky-nav')
const sidebar = document.querySelector('#sidebar')
const tagsBar = document.querySelector('#tags-bar')
const rightToc = document.querySelector('#right-toc')
nav && nav.classList.replace('top-0', '-top-16')
tagsBar && tagsBar.classList.replace('top-16', 'top-0')
sidebar && sidebar.classList.replace('top-20', 'top-2')
rightToc && rightToc.classList.replace('top-16', 'top-0')
}
}
/**
* 显示导航
*/
const showNav = () => {
if (document) {
const nav = document.querySelector('#sticky-nav')
const sidebar = document.querySelector('#sidebar')
const tagsBar = document.querySelector('#tags-bar')
const rightToc = document.querySelector('#right-toc')
nav && nav.classList.replace('-top-16', 'top-0')
tagsBar && tagsBar.classList.replace('top-0', 'top-16')
sidebar && sidebar.classList.replace('top-2', 'top-20')
rightToc && rightToc.classList.replace('top-0', 'top-16')
}
}
BaseLayout.propTypes = {
children: PropTypes.node
}