滚动查看需要点击2次才能获得正确的区域

Question

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

这是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>

以下是JS代码：

(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

这是因为导航栏的缘故。

第一次，导航栏有默认属性，但当我们点击第一个选项时，导航栏就会变得固定，所以在第一次点击时，滚动条的位置就会变得混乱。

要在代码中修复此问题，您可以在导航栏的位置更改为margin-top时，将与导航栏高度相同的高度添加到第一个导航选项(本例中为服务)。

在jsfiddle代码中，只需在滚动条件中添加以下内容。

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

下面是相同的jsfiddle的工作原理。