在主页我有服务与readmore按钮列出，当用户点击readmroe按钮我想发送到各自的服务页面部分具有特定的id.
但由于粘性导航条的高度为50 px的滚动在重叠的内容在服务页面
主页：

<header>
    <nav id="navbar" class="sticky">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <div class="top-top">
    <ul class="temp-op">
      <li><a href="services.html#ser-1" >Service-1</a></li>
        <li><a href="services.html#ser-2" >Service-2</a></li>
        <li><a href="services.html#ser-3" >Service-3</a></li>
        <li><a href="services.html#ser-4" >Service-4</a></li>
        <li><a href="services.html#ser-5" >Service-5</a></li>
    </ul>
  </div>

字符串
x1c 0d1x的数据
因此，当用户单击services-1、services-2等时，它应该重定向到services page id section services page：

<header>
<nav id="navbar" class="sticky">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="services.php">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

</header>
  
  <section id="ser-1" class="service">
    <h2>Service-1</h2>
    <p>Description of Service-1 goes here.</p>
  </section>
  
  <section id="ser-2" class="service">
    <h2>Service-2</h2>
    <p>Description of Service-2 goes here.</p>
  </section>
  
  <section id="ser-3" class="service">
    <h2>Service-3</h2>
    <p>Description of Service-3 goes here.</p>
  </section>
  
  <section id="ser-4" class="service">
    <h2>Service-4</h2>
    <p>Description of Service-4 goes here.</p>
  </section>
  
  <section id="ser-5" class="service">
    <h2>Service-5</h2>
    <p>Description of Service-5 goes here.</p>
  </section>

型

的
正如我们所看到的，当我们点击主页的readmore按钮时，由于服务页面的粘性标题内容隐藏，重定向到服务页面id部分，我们如何修复此重定向问题重叠内容
我已经尝试了css偏移，但没有工作

.destination {

scroll-margin: 100px 0 0 0;
 
}

型