正如我在标题中所描述的，我有这个HTML
<li class="table-of-content"><a href="#info">© INFO</a></li>
当我点击它时，页面向下滚动到有id="info"的横幅，但问题是我有一个覆盖滚动内容的粘性导航条！
我们可以调整滚动条的自定义位置，使其在粘性导航条之后向下滚动id="info"像素吗？
我知道还有其他的解决方案，如在我的HTML上方插入另一个元素并添加id="info"，以便滚动到它，内容不会被粘滞导航条覆盖，但我想有一个自定义的滚动位置到屏幕.不管是JS还是CSS
任何帮助是赞赏！
我建议您在链接到的section上使用scroll-margin-top.这里有一个例子(注意:我添加了平滑滚动以获得更好的效果，但这完全是可选的).更多关于scroll-margin-top here的信息.
html,
body {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
nav {
height: 3rem;
position: sticky;
top: 0;
background: white;
}
section {
scroll-margin-top: 4rem;
} <nav>
<ul>
<li><a href="#anchor-1"> section 1 </a></li>
<li><a href="#anchor-2"> section 2 </a></li>
<li><a href="#anchor-3"> section 3 </a></li>
</ul>
</nav>
<section id="anchor-1">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt amet ea, nesciunt, officia nobis id facere esse, unde deleniti odit et dolorem optio obcaecati quae magni inventore? Molestiae, officia, dolorum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nobis, omnis veniam tempora quidem recusandae ipsum blanditiis cumque nesciunt! Numquam nemo laboriosam, autem fuga, iure enim eos vero laudantium et!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe earum quod natus consectetur voluptas ea, assumenda nobis blanditiis qui aut, et facilis vel inventore similique. Amet quis, totam provident.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt amet ea, nesciunt, officia nobis id facere esse, unde deleniti odit et dolorem optio obcaecati quae magni inventore? Molestiae, officia, dolorum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nobis, omnis veniam tempora quidem recusandae ipsum blanditiis cumque nesciunt! Numquam nemo laboriosam, autem fuga, iure enim eos vero laudantium et!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe earum quod natus consectetur voluptas ea, assumenda nobis blanditiis qui aut, et facilis vel inventore similique. Amet quis, totam provident.
</p>
</section>
<section id="anchor-2">
<h2>Section 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt amet ea, nesciunt, officia nobis id facere esse, unde deleniti odit et dolorem optio obcaecati quae magni inventore? Molestiae, officia, dolorum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nobis, omnis veniam tempora quidem recusandae ipsum blanditiis cumque nesciunt! Numquam nemo laboriosam, autem fuga, iure enim eos vero laudantium et!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe earum quod natus consectetur voluptas ea, assumenda nobis blanditiis qui aut, et facilis vel inventore similique. Amet quis, totam provident.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt amet ea, nesciunt, officia nobis id facere esse, unde deleniti odit et dolorem optio obcaecati quae magni inventore? Molestiae, officia, dolorum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nobis, omnis veniam tempora quidem recusandae ipsum blanditiis cumque nesciunt! Numquam nemo laboriosam, autem fuga, iure enim eos vero laudantium et!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe earum quod natus consectetur voluptas ea, assumenda nobis blanditiis qui aut, et facilis vel inventore similique. Amet quis, totam provident.
</p>
</section>
<section id="anchor-3">
<h2>Section 3</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt amet ea, nesciunt, officia nobis id facere esse, unde deleniti odit et dolorem optio obcaecati quae magni inventore? Molestiae, officia, dolorum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nobis, omnis veniam tempora quidem recusandae ipsum blanditiis cumque nesciunt! Numquam nemo laboriosam, autem fuga, iure enim eos vero laudantium et!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe earum quod natus consectetur voluptas ea, assumenda nobis blanditiis qui aut, et facilis vel inventore similique. Amet quis, totam provident.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt amet ea, nesciunt, officia nobis id facere esse, unde deleniti odit et dolorem optio obcaecati quae magni inventore? Molestiae, officia, dolorum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nobis, omnis veniam tempora quidem recusandae ipsum blanditiis cumque nesciunt! Numquam nemo laboriosam, autem fuga, iure enim eos vero laudantium et!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe earum quod natus consectetur voluptas ea, assumenda nobis blanditiis qui aut, et facilis vel inventore similique. Amet quis, totam provident.
</p>
</section>