当锚点遇到fixed定位

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了当锚点遇到fixed定位相关的知识,希望对你有一定的参考价值。

简介:

当点击页面的锚点时会跳转到指定id的元素,而实际表现的是滚动条滚动使指定id元素对齐滚动条所处元素的【顶端】。如果当页面上方出现fixed定位时,将会出现锚点定位不准确的情况。

1、问题重现

当使用锚点时,页面上方存在fixed定位,将会出现如下情况(点击“目录二”对应跳转“内容二”的锚点):

技术分享

代码如下:

2、巧妙运用margin跟padding解决问题

2.1、尝试给“内容*”添加外边距 ==> margin-top:80px

2.1.1、效果如下(没有变化):

技术分享

2.1.2、代码如下:

2.1.3、结论:锚点定位跟外边距没有关系。

2.2、尝试给“内容*”添加内边距 ==> padding-top:80px

2.2.1、效果如下(虽然锚点定位准了但是却多出来内边距部分):

技术分享

2.2.2、代码如下: