d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-09 15:10:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature:

Browse Source 
Header滚动顺滑
This commit is contained in:
tangly1024
2021-12-23 14:12:39 +08:00
parent 8248a5055d
commit 50ee25ec15
1 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/Header.js
View File

@@ -2,6 +2,7 @@ import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global' import { useGlobal } from '@/lib/global'
import { faArrowDown } from '@fortawesome/free-solid-svg-icons' import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import throttle from 'lodash.throttle'
import { useCallback, useEffect, useState } from 'react' import { useCallback, useEffect, useState } from 'react'
import Typed from 'typed.js' import Typed from 'typed.js'
@@ -35,7 +36,7 @@ export default function Header () {
const scrollTrigger = useCallback(() => { const scrollTrigger = useCallback(() => {
if (window.scrollY > windowTop & window.scrollY < window.innerHeight & !autoScroll) { if (window.scrollY > windowTop & window.scrollY < window.innerHeight & !autoScroll) {
autoScroll = true autoScroll = true
scrollTo(window.innerHeight, autoScrollEnd) scrollTo(wrapperTop, autoScrollEnd)
} }
if (window.scrollY < windowTop & window.scrollY < window.innerHeight & !autoScroll) { if (window.scrollY < windowTop & window.scrollY < window.innerHeight & !autoScroll) {
autoScroll = true autoScroll = true
@@ -57,6 +58,14 @@ export default function Header () {
} }
} }
let wrapperTop = 0
function updateHeaderHeight () {
if (window) {
const wrapperElement = document.getElementById('wrapper')
wrapperTop = wrapperElement.offsetTop
}
}
useEffect(() => { useEffect(() => {
updateHeaderHeight() updateHeaderHeight()
updateTopNav() updateTopNav()
@@ -64,14 +73,17 @@ export default function Header () {
window.addEventListener('resize', updateHeaderHeight) window.addEventListener('resize', updateHeaderHeight)
return () => { return () => {
window.removeEventListener('scroll', scrollTrigger) window.removeEventListener('scroll', scrollTrigger)
window.removeEventListener('resize', updateHeaderHeight)
} }
}) })
return <header id='header' className='h-screen w-full bg-cover bg-center md:-mt-14' return <header id='header' className='duration-500 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")' }}> style={{ height: 'calc(100vh + 1px)', 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 className='absolute z-10 flex h-full items-center -mt-14 justify-center w-full text-4xl md:text-7xl text-white'>
<div id="typed" className='text-center font-serif'></div> <div id="typed" className='flex 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 onClick={() => { scrollTo(wrapperTop, autoScrollEnd) }} className='cursor-pointer w-full text-center text-2xl animate-bounce absolute bottom-10 text-white'>
<FontAwesomeIcon icon={faArrowDown} />
</div> </div>
</header> </header>
} }
@@ -86,22 +98,15 @@ function scrollTo (offset, callback) {
const onScroll = function () { const onScroll = function () {
if (window.pageYOffset.toFixed() === fixedOffset) { if (window.pageYOffset.toFixed() === fixedOffset) {
window.removeEventListener('scroll', onScroll) window.removeEventListener('scroll', onScroll)
window.onscroll = function () {}
callback() callback()
} }
} }
window.addEventListener('scroll', onScroll) window.addEventListener('scroll', onScroll)
onScroll() window.onscroll = onScroll()
window.scrollTo({ window.scrollTo({
top: offset, top: offset,
behavior: 'smooth' behavior: 'smooth'
}) })
} }
function updateHeaderHeight () {
if (window) {
const headerElement = document.getElementById('header')
console.log(headerElement, window.innerHeight)
headerElement?.style?.setProperty('height', window.innerHeight + 'px')
}
}