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

Question

我在导航栏上使用了 scroll spy。因此，当我单击 link 时，它会通过动画页面直接进入单击的 link 部分。但问题是，当我单击服务 link 时，它首先从 div 稍微降低一点，然后当我再次单击 link 时，它会将我带到正确的区域，在那里我可以参见 "What we offer"。我需要修复，这样我就不需要点击 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。

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

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

html

javascript

scrollspy