прокрутить шпиона нужно кликнуть 2 раза для получения нужной области - PullRequest
Новая
       24

прокрутить шпиона нужно кликнуть 2 раза для получения нужной области

0 голосов
/ 27 октября 2019

Я использовал прокрутку шпиона на панели навигации. Поэтому, когда я нажимаю на ссылку, она сразу переходит в раздел с ссылками на ссылки, анимируя страницу. Но проблема в том, что, когда я нажимаю ссылку «СЕРВИС», сначала она становится немного ниже от 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/

1 Ответ

0 голосов
/ 27 октября 2019

Это происходит из-за навигационной панели.

Впервые панель навигации имеет свойства по умолчанию, но при нажатии на первую опцию панель навигации становится фиксированной, поэтому положение прокрутки портится при первом щелчке.

Чтобы исправить этов своем коде вы можете добавить 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 того же.

...