接下来是中间的导航栏。我们可以看到这里头像的动画和中间导航栏的定位都和鼠标滚动有关。先实现布局。这里要求导航栏在页面的部分滚动范围内始终位于div的顶部，位置随鼠标滚动而变化。对于较低的滚动范围，导航栏固定在页面的上部。

这里有两个地方需要注意

需要有一个无法覆盖的区域，可以给人更好的开合屏幕的感觉。而且，向下滑动时，中间导航栏下方区域的内容不能出现在该区域。

一定要尽量少做DOM操作，这样对性能影响很大！

聆听鼠标滚动事件

private fixedFlag:布尔值=falseprivate unFixedFlag:布尔值=true私有挂载(){ window . addeventlistener(' scroll '，this . handlescroll)；} private handleScroll(){ const scroll top=window . pageyoffset | | document . document element . scroll top | | document . body . scroll top；if (scrollTop 300) { if(！this . FixedFlag){ const obj=document！getElementById(' index-menu ')；const obj2=文档！getElementById('伪区域')；obj！ style.position=' fixedobj！ style.top=' 77pxobj2！ style.position=' fixedobj2！ style.top=' 47pxthis.fixedFlag=truethis.unFixedFlag=false} } else { if(！this . unfixedflag){ const obj=document！getElementById(' index-menu ')；const obj2=文档！getElementById('伪区域')；obj！ style.position=obj！ style.top=obj2！ style.position=obj2！ style.top=this.unFixedFlag=truethis.fixedFlag=false}}}效果显示

项目地址

https://github.com/pppercyWan.

摘要

上面提到的是边肖介绍给大家的vue实现了中间导航栏的布局功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！