布局解决悬浮固定导航栏遮挡页面主体内容问题（主要考虑遮挡锚点问题）

最新推荐文章于 2023-12-04 18:57:51 发布

weixin_33932129

最新推荐文章于 2023-12-04 18:57:51 发布

阅读量5.3k

点赞数 1

文章标签： php javascript 前端 ViewUI

原文链接：https://juejin.im/post/5c11c3f0518825275318ba8f

版权

作者：吴业飞时间：2018.06.21

在工作中经常遇到使用position: fixed;固定在页面顶部的导航栏会遮挡页面主体内容，特别是在使用锚点跳转的时候，锚点默认跳转到视窗顶部，正好被导航遮挡。我使用过两种方式解决这个问题，各有优劣，视具体需求而定。

思路是将锚点安在真正要使用锚点定位的元素的上一个兄弟元素上，文字表述有点绕，show the code!
假设我们要安锚点的元素是

<div id="backToTop">
	我要瞬移到顶部！
</div>
复制代码

现在我们修改html结构

<div id="backToTop">
	</br>
	</br>
	</br>
	</br>
</div>
<div>
	我要瞬移到顶部！
</div>
复制代码

原理很简单，我用</br>换行粗暴地撑开了一定的高度实现不被导航栏遮挡。这样的缺点是破坏了布局，撑开的间距可能会比较难看，如果导航的高度不是太大这点间距可以

关注