导航栏无法到达正文顶部

Question

我想让导航栏休息在所有组件的顶部，但当我打开导航菜单将索引页的所有组件向下推。

我使用Next js, Tailwind css和Framer motion。

它只发生在scroll top = 0时，当我们滚动一点时，它会起作用如预期(在其他组件之上)

链接到GitHub仓库

这个文件是navbar.js在components文件夹

import { motion, AnimatePresence, useCycle, usePresent } from 'framer-motion';
import { useState } from 'react';
import Link from 'next/link';
import React from 'react';
import ThemeSwitch from './ThemeSwitch';
import Burger from './burger';
import { burg } from './burger';
const sidebarVariants = {
open: {
opacity: '100%',
y: 0,
transition: {
duration: 0.5,
},
},
closed: {
opacity: '0%',
y: '-100vh',
transition: {
duration: 0.5,
delay: 1,
},
},
};
const Navigation = () => {
const [isOpen, toggleOpen] = useCycle(false, true);
function navChange() {
toggleOpen();
}
function liToggle() {
toggleOpen();
burg();
}
return (
<>
<div className='sticky top-0 z-20 py-2 bg-white/60 backdrop-blur md:py-6 md:mb-6 dark:bg-black/60 shadow-lg shadow-black/5 dark:shadow-white/5'>
<div className='container px-4 mx-auto lg:max-w-4xl flex items-center justify-between transition duration-500'>
<Link href='/'>
<a
className={
'font-medium tracking-wider transition-colors text-gray-900 hover:text-sky-500 dark:text-white hover:animate-pulse '
}
>
Atharv Bilbile
</a>
</Link>
<div className='flex items-center justify-between'>
<Link href='/'>
<a className='hidden md:flex px-3 py-2 rounded-3xl hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black'>
Home
</a>
</Link>
<Link href='/'>
<a className='hidden md:flex px-3 py-2 rounded-3xl hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black'>
About
</a>
</Link>
<Link href='/abnext'>
<a className='hidden md:flex px-3 py-2 rounded-3xl hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black'>
Blogs
</a>
</Link>
<Link href='/abnext'>
<a className='hidden md:flex px-3 py-2 rounded-3xl hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black'>
Contact
</a>
</Link>
<ThemeSwitch />
<button onClick={navChange} className='md:hidden'>
<Burger />
</button>
</div>
</div>
</div>
<AnimatePresence>
{isOpen && (
<motion.div
variants={sidebarVariants}
initial={{ y: '-100vh' }}
animate={isOpen ? 'open' : 'closed'}
exit={{ opacity: '0%', y: '-100vh' }}
transition={{ duration: '1', delay: 0 }}
className='sticky top-12 z-10 flex justify-center py-9 bg-white/60 dark:bg-black/60 backdrop-blur shadow-2xl dark:shadow-white/5'
>
<ul className=' flex flex-col text-center'>
<Link href='/'>
<a>
<li
onClick={liToggle}
className='px-3 py-2 rounded-3xl hover:bg-black hover:text-white w-[200px] dark:hover:bg-white dark:hover:text-black hover:animate-pulse'
>
Home
</li>
</a>
</Link>
<Link href='/'>
<a>
<li
onClick={liToggle}
className='px-3 py-2 rounded-3xl hover:bg-black hover:text-white w-[200px] dark:hover:bg-white dark:hover:text-black hover:animate-pulse'
>
About
</li>
</a>
</Link>
<Link href='/abnext'>
<a>
<li
onClick={liToggle}
className='px-3 py-2 rounded-3xl hover:bg-black hover:text-white w-[200px] dark:hover:bg-white dark:hover:text-black hover:animate-pulse'
>
Blogs
</li>
</a>
</Link>
<Link href='/abnext'>
<a>
<li
onClick={liToggle}
className='px-3 py-2 rounded-3xl hover:bg-black hover:text-white w-[200px] dark:hover:bg-white dark:hover:text-black hover:animate-pulse'
>
Contact
</li>
</a>
</Link>
</ul>
</motion.div>
)}
</AnimatePresence>{' '}
</>
);
};
export default Navigation;

Answer 1

导航条的位置sticky在一定阈值之前充当位置relative，这意味着它是根据文档的正常流程定位的->"pushes"它下面的所有东西。你想要的是位置fixed在导航条(这也要给导航条宽度100%)。

所以改变:

className='sticky top-12 z-10 flex justify-center py-9 bg-white/60 dark:bg-black/60 backdrop-blur shadow-2xl dark:shadow-white/5'

:

className="fixed w-full top-12  z-10 flex justify-center py-9 bg-white/60 dark:bg-black/60 backdrop-blur shadow-2xl dark:shadow-white/5"