scroll spy need to click 2 times for getting the right area

Question

I used scroll spy on the navbar. So when I click a link it goes straight to the clicked link section by animating the page. But the problem is when I click SERVICES link it first take a little bit lower from the div then when I click again on the link then it takes me to the right area where I can see "What we offer". I need a fix so I don't need to click 2 times to get the right position.

Here is the 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>

Here is JS code:

(function($) {
  "use strict"
  $(window).on('load', function() {
    $("#preloader").delay(600).fadeOut();
  });
  /**$('body').scrollspy({
      target: '#nav',
      offset: 50;

  });**/
  $('body').scrollspy({
    target: ".navbar",
  });
  $("#nav .main-nav a[href^='#']").on('click', function(e) {
    e.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
      scrollTop: $(this.hash).offset().top
    }, 600);
  });
  $(document).ready(function() {
    $(".owl-carousel").owlCarousel({
      loop: true,
      dots: true,
      autoplay: true,
      items: 1,

    });
  });
})(jQuery);

https://jsfiddle.net/wLgb01jz/1/

Answer 1

It's happening because of the navbar.

For the first time, the navbar has default properties but as we click on the first option the navbar becomes fixed so that's where the scroll position messed up on the first click.

To fix that in your code you can add a margin-top same as the navbar height to the first nav option(services in this case) when the position of the navbar changes to fixed.

From the jsfiddle code, just add this in the scroll condition.

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

Here is the working jsfiddle of the same.