bg-header

themes/matery/components/Header.js

@@ -1,15 +1,11 @@
 // import Image from 'next/image'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import Typed from 'typed.js'
 import CONFIG_MATERY from '../config_matery'
-import throttle from 'lodash.throttle'
 import { useGlobal } from '@/lib/global'
+import BLOG from '@/blog.config'
 
 let wrapperTop = 0
-let windowTop = 0
-let autoScroll = false
-const enableAutoScroll = false // 是否开启自动吸附滚动
-const throttleMs = 200
 
 /**
  *
@@ -21,12 +17,11 @@ const Header = props => {
   const { locale } = useGlobal()
 
   useEffect(() => {
-    scrollTrigger()
     updateHeaderHeight()
     if (!typed && window && document.getElementById('typed')) {
       changeType(
         new Typed('#typed', {
-          strings: CONFIG_MATERY.HOME_BANNER_GREETINGS,
+          strings: BLOG.GREETING_WORDS.split(','),
           typeSpeed: 200,
           backSpeed: 100,
           backDelay: 400,
@@ -35,51 +30,13 @@ const Header = props => {
         })
       )
     }
-    if (enableAutoScroll) {
-      scrollTrigger()
-      window.addEventListener('scroll', scrollTrigger)
-    }
+
     window.addEventListener('resize', updateHeaderHeight)
     return () => {
-      if (enableAutoScroll) {
-        window.removeEventListener('scroll', scrollTrigger)
-      } window.removeEventListener('resize', updateHeaderHeight)
+      window.removeEventListener('resize', updateHeaderHeight)
     }
   }, [])
 
-  const autoScrollEnd = () => {
-    if (autoScroll) {
-      windowTop = window.scrollY
-      autoScroll = false
-    }
-  }
-
-  /**
-     * 吸附滚动，移动端关闭
-     * @returns
-     */
-  const scrollTrigger = useCallback(throttle(() => {
-    if (screen.width <= 768) {
-      return
-    }
-
-    const scrollS = window.scrollY
-
-    // 自动滚动
-    if ((scrollS > windowTop) & (scrollS < window.innerHeight) && !autoScroll
-    ) {
-      autoScroll = true
-      window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
-      setTimeout(autoScrollEnd, 500)
-    }
-    if ((scrollS < windowTop) && (scrollS < window.innerHeight) && !autoScroll) {
-      autoScroll = true
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-      setTimeout(autoScrollEnd, 500)
-    }
-    windowTop = scrollS
-  }, throttleMs))
-
   function updateHeaderHeight() {
     requestAnimationFrame(() => {
       const wrapperElement = document.getElementById('wrapper')
@@ -90,11 +47,11 @@ const Header = props => {
   return (
         <header
             id="header" style={{ zIndex: 1 }}
-            className=" w-full h-screen bg-black text-white relative"
+            className=" w-full h-screen relative bg-black"
         >
 
-            <div className="absolute flex flex-col h-full items-center justify-center w-full ">
-                <div className='text-4xl md:text-5xl text-white shadow-text'>{siteInfo?.title}</div>
+            <div className="text-white absolute flex flex-col h-full items-center justify-center w-full ">
+                <div className='text-4xl md:text-5xl shadow-text'>{siteInfo?.title}</div>
                 <div className='mt-2 h-12 items-center text-center shadow-text text-white text-lg'>
                     <span id='typed' />
                 </div>