滚动间谍需要单击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。