Html 粘性导航栏中的内部链接不'；除非导航栏已经堆叠，否则不要链接到正确的位置

我正在用纯HTML和CSS编写一个基于导航栏的粘性导航系统。我在导航栏上有一些内部链接，这些链接指向页面的相应部分

为了防止内容跳转到页面顶部并被导航栏部分隐藏，我在内容顶部添加了一个具有适当高度的简单div，然后跳转到该div

我在Codepen上创建了一个示例：

代码如下：

window.onscroll=function（）{
myFunction（）
};
var navbar=document.getElementById（“navbar”）；
var sticky=navbar.offsetTop；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}

正文{
保证金：0；
字号：28px；
}
.标题{
背景色：#f1f1；
填充：30px；
文本对齐：居中；
}
#导航栏{
溢出：隐藏；
背景色：#333；
}
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
#导航栏a：悬停{
背景色：#ddd；
颜色：黑色；
}
#导航条a.激活{
背景色：#4CAF50；
颜色：白色；
}
.内容{
填充：16px；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}

向下滚动
向下滚动以查看粘性效果

粘性导航示例
当您到达滚动位置时，导航栏将粘在顶部

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告上写着“没有胎记”

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告上写着“没有胎记”

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告上写着“没有胎记”。
一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告上写着“没有胎记”

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告上写着“没有胎记”

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告上写着“没有胎记”

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。红背飞虱
他的广告上写着“没有胎记”

我看不到这个问题-页面上内容的最终位置不同-请您详细解释一下，您可以测试它。转到代码段并按上述方式运行案例1。运行案例1后，导航栏将立即停靠，您将被带到粗体文本。现在再次单击导航栏按钮。理想情况下，它不应改变粗体文本的位置。但确实如此。它向下推几像素。请尝试

.sticky+.content{padding top:65px；}

并查看或尝试

.content{padding:12px 16px；}