CSS锚点定位是网页中常见的一个功能，在网页中便于用户无需手动滚动页面也能够直达页面的任意部分。但是，在使用锚点定位的时候可能会遇到一个问题，就是锚点定位部分被顶部固定导航栏遮住了。这个问题在一些设计精美的网站中很常见，本文将介绍如何避免导航栏遮挡锚点定位部分的问题。
1. 现象及原因
首先，让我们来了解一下这个问题的具体表现和原因。
- 现象：点击页面上的锚点链接跳转到对应的位置时，目标位置的部分会被固定在页面的最顶部，而导航栏也会处于顶部，导致导航栏盖在了目标位置的部分，导致无法正常显示该部分的内容。
- 原因：当我们点击了网页中的锚点链接，页面会滚动到对应的位置。但是，导航栏是固定在页面顶端的，在滚动时不会随之移动。当目标位置处于导航栏下方时，就会被遮挡住。
2. 解决方案
针对这个问题，我们可以采取以下的解决方案。
2.1 增加一个空的容器
在需要锚点定位的位置上增加一个空的容器，通过设置容器的高度和导航栏的高度相同，并将容器放在锚点定位的上方，使得跳转到锚点位置时，该位置的内容不再被导航栏遮盖。具体的代码如下：
.anchor {
display: block;
height: 100px; //根据导航栏高度调整
margin-top: -100px; //根据导航栏高度调整
visibility: hidden;
}
其中，`anchor`是我们新建的空容器的类名，我们通过设置`margin-top: -100px`和`height: 100px`分别控制距离顶部的位置和高度，并将其隐藏。
2.2 用JS动态计算距离
除了使用一个空容器外，我们还可以通过JS动态计算距离实现。这种方法相对于使用空容器的方法更为简便，代码如下：
window.onload = function() {
var jump = document.getElementsByClassName('jump');
for (var i = 0; i < jump.length; i++) {
jump[i].addEventListener('click', function(e) {
e.preventDefault();
var currentHref = '' + this.getAttribute('data-attribute');
var currentTarget = document.querySelector(currentHref);
// 计算距离
var distance = currentTarget.getBoundingClientRect().top - document.getElementById('header').offsetHeight;
window.scrollTo({ top: distance, behavior: 'smooth' });
});
}
}
其中，`jump`是我们的目标锚点链接的类名，`data-attribute`是该锚点链接对应的目标标签的id名。在点击跳转链接时，通过JS动态计算目标位置与导航栏高度的距离，并通过全局的`window.scrollTo`方法实现平滑滚动。
3. 小结
通过以上的两种方法，我们可以轻松地实现在锚点定位时避免导航栏遮挡的问题。其中，空容器的方法在静态页面中效果更佳，在动态页面中需要通过JS动态计算距离实现。了解这个问题的原因和解决方法，有助于我们更好地处理这类问题，提高网站的用户体验。