Javascript 滚动间谍需要点击2次以获得正确的区域

我在导航栏上使用了scroll spy。因此，当我点击一个链接时，它会通过设置页面动画直接进入点击链接部分。但问题是，当我单击服务链接时，它首先会从div中降低一点，然后当我再次单击链接时，它会将我带到正确的区域，在那里我可以看到“我们提供什么”。我需要一个修复，所以我不需要点击两次来获得正确的位置

这是HTML

<nav id="nav" class="navbar nav-transparent">
  <div class="container">
    <div class="navbar-header">

      <div class="navbar-brand">
        <a href="index.html">
          <img class="logo" src="img/logo.png" alt="logo">
          <img class="logo-alt" src="img/logo-alt.png" alt="logo">
        </a>
      </div>


      <div class="nav-collapse">
        <span></span>
      </div>

    </div>

    <ul class="main-nav nav navbar-nav navbar-right">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#service">Services</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#pricing">Prices</a></li>
      <li><a href="#team">Team</a></li>
      <li class="has-dropdown"><a href="#blog">Blog</a>
        <ul class="dropdown">
          <li><a href="blog-single.html">blog post</a></li>
        </ul>
      </li>
      <li><a href="#contact">Contact</a></li>
    </ul>

  </div>
</nav>

<div id="home" class="sld owl-carousel owl-theme">
  <div>
    <a href="youtube.com"><img src="img/background1.jpg" alt=""></a>
    <p style="color: black; text-align: center; position: absolute; top: 50%;left: 40%; font-size: 5vw">fire alarm</p>
  </div>
  <div>
    <a href="youtube.com"><img src="img/background1.jpg" alt=""></a>
    <p style="color: black; text-align: center; position: absolute; top: 50%;left: 40%; font-size: 5vw">fire alarm</p>
  </div>
  <div>
    <a href="youtube.com"><img src="img/background1.jpg" alt=""></a>
    <p style="color: black; text-align: center; position: absolute; top: 50%;left: 40%; font-size: 5vw">fire alarm</p>
  </div>


</div>
<div class="service-header" id="service">
</div>
<div id="services" class="md-padding">

  <div class="container">

    <div class="row">

      <div class="section-header text-center">
        <h2 class="title">What we offer</h2>
      </div>


      <div class="col-md-4 col-sm-6">
        <div class="service">
          <i class="fa fa-diamond"></i>
          <h3>App Development</h3>
          <p>Maecenas tempus tellus eget condimentum rhoncus sem quam semper libero.</p>
          <div class="blah"><a class="blah" href="#features">Read More</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

---

这是因为导航栏

导航栏第一次具有默认属性，但当我们单击第一个选项时，导航栏将变为固定状态，因此在第一次单击时，滚动位置会出现混乱

要在代码中修复此问题，当导航栏的位置更改为固定时，可以在第一个导航选项（本例中为服务）中添加与导航栏高度相同的

边距顶部

从JSFIDLE代码中，只需将其添加到滚动条件中

if(wScroll > 1) {
  $('#nav').addClass('fixed-nav');
  $('#services').css('margin-top',120);
} else {
  $('#nav').removeClass('fixed-nav');
  $('#services').css('margin-top',0); 
}

这是同样的工作原理。
嗨，我看了看小提琴，这是因为导航栏。导航栏第一次具有默认属性，但当我们单击第一个选项时，导航栏将变为固定状态，因此第一次单击时滚动位置会出现混乱
if(wScroll > 1) {
  $('#nav').addClass('fixed-nav');
  $('#services').css('margin-top',120);
} else {
  $('#nav').removeClass('fixed-nav');
  $('#services').css('margin-top',0); 
}