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

feature:

Browse Source 
移动端窗口大小调整
This commit is contained in:
tangly1024
2021-12-23 12:31:30 +08:00
parent 504deb9bf1
commit e851877c47
2 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
blog.config.js
View File

@@ -4,6 +4,7 @@ const BLOG = {
email: 'tlyong1992@hotmail.com',
link: 'https://tangly1024.com',
description: '分享编程技术与记录生活',
headerStrings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'], // 首页文字
lang: 'zh-CN', // ['zh-CN','en-US'] default lang => see /lib/lang.js for more.
notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // Important page_id！！！
notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public

30
components/Header.js
View File

@@ -1,3 +1,4 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -13,7 +14,7 @@ export default function Header () {
useEffect(() => {
if (!typed && window && document.getElementById('typed')) {
changeType(new Typed('#typed', {
strings: ['Hi，我是一个程序员', 'Hi，我是一个打工人', 'Hi，我是一个干饭人', '欢迎来到我的博客🎉'],
strings: BLOG.headerStrings,
typeSpeed: 200,
backSpeed: 100,
backDelay: 400,
@@ -30,17 +31,13 @@ export default function Header () {
const autoScrollEnd = () => {
windowTop = window.scrollY
autoScroll = false
console.log('滚动结束回调', windowTop)
}
const scrollTrigger = useCallback(() => {
console.log('触发 top', windowTop, 'y', window.scrollY, autoScroll)
if (window.scrollY > windowTop & window.scrollY < window.innerHeight & !autoScroll) {
// console.log('滚中间', windowTop, window.scrollY, window.innerHeight)
autoScroll = true
scrollTo(window.innerHeight, autoScrollEnd)
}
if (window.scrollY < windowTop & window.scrollY < window.innerHeight & !autoScroll) {
// console.log('滚上', windowTop, window.scrollY, window.innerHeight)
autoScroll = true
scrollTo(0, autoScrollEnd)
}
@@ -60,25 +57,22 @@ export default function Header () {
}
}
// 监听滚动
useEffect(() => {
updateHeaderHeight()
updateTopNav()
window.addEventListener('scroll', scrollTrigger)
window.addEventListener('resize', updateHeaderHeight)
return () => {
window.removeEventListener('scroll', scrollTrigger)
}
})
return <header className='h-screen w-full'>
<div className='absolute z-10 flex h-screen items-center justify-center w-full text-4xl md:text-7xl text-white'>
<div id="typed" className=' text-center font-serif'></div>
return <header id='header' className='h-screen w-full bg-cover bg-center md:-mt-14'
style={{ backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4), rgba(0, 0, 0, 0.5) ),url("./bg_image.jpg")' }}>
<div className='static z-10 flex h-full items-center justify-center w-full text-4xl md:text-7xl text-white'>
<div id="typed" className='text-center font-serif'></div>
<div onClick={() => { scrollTo(window.innerHeight, autoScrollEnd) }} className='cursor-pointer w-full text-center text-2xl animate-bounce absolute bottom-10 text-white'><FontAwesomeIcon icon={faArrowDown} /></div>
</div>
<div className='bg-black bg-cover bg-center h-screen md:-mt-14 animate__fadeInRight animate_fadeIn'
style={{ backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4), rgba(0, 0, 0, 0.5) ),url("./bg_image.jpg")' }}>
</div>
</header>
}
@@ -103,3 +97,11 @@ function scrollTo (offset, callback) {
behavior: 'smooth'
})
}
function updateHeaderHeight () {
if (window) {
const headerElement = document.getElementById('header')
console.log(headerElement, window.innerHeight)
headerElement.style.setProperty('height', window.innerHeight + 'px')
}
}