在开发网页时，我们经常会遇到这样一个问题：当页面有固定在顶部的导航栏时，用户点击页面内的链接或按钮进行跳转时，目标内容可能会被固定导航栏遮挡住，导致用户看不到他们想要查看的内容。这不仅影响用户体验，还可能让用户感到困惑。今天我们就来聊聊如何通过CSS中的scroll-margin-top属性来轻松解决这个问题。

场景介绍：固定导航栏遮挡问题

假设你正在开发一个购物网站，页面顶部有一个固定的导航栏，用户可以通过导航栏快速跳转到不同的商品类别。当用户点击导航栏上的链接时，页面会滚动到对应的商品区块，但由于导航栏是固定的，跳转到的内容可能会被遮挡住。

如何解决：使用scroll-margin-top

为了解决这个问题，我们可以使用CSS中的scroll-margin-top属性。这是一个非常简单却有效的属性，它允许我们在元素的顶部预留一些额外的空间，这样当页面滚动到该元素时，它不会被固定的导航栏挡住。

示例代码：解决遮挡问题

首先，我们来看一个简单的例子。假设你的网站有一个固定在页面顶部的导航栏，下面是HTML结构：

<div>导航栏使用了固定定位，因此它始终显示在页面的顶部：

.fixed-header { position: fixed; top: 0; width: 100%; background-color: #333; color: #fff; padding: 1rem; z-index: 1000;}

接下来，我们生成一些商品区块作为页面内容：

const content = document.querySelector('#content');for (let i = 1; i <= 50; i++) { const product = document.createElement('div'); product.id = `product-${i}`; product.className = 'product-item'; product.textContent = `商品 ${i}`; content.appendChild(product);}

假设用户点击导航栏的某个链接，我们希望页面滚动到商品编号20的位置：

const targetProduct = document.querySelector('#product-20');targetProduct.scrollIntoView({ behavior: 'smooth' });

为了防止导航栏遮挡商品，我们只需要在CSS中为商品编号20添加scroll-margin-top属性：

#product-20 { scroll-margin-top: 3rem; /* 导航栏高度大约是3rem */}

这样，当页面滚动到商品20时，它会自动与导航栏保持一定的距离，不会被遮挡。

结束

通过使用scroll-margin-top属性，你可以轻松解决固定导航栏遮挡页面内容的问题。这对于用户体验至关重要，特别是在移动端设备上，用户对流畅的页面体验有更高的要求。希望这个小技巧能帮助你更好地设计和开发出用户友好的网页！