Как исправить Bootstrap Scrollspy для элементов, не относящихся к телу (плохое поведение при втором нажатии) - PullRequest
Новая
       23

Как исправить Bootstrap Scrollspy для элементов, не относящихся к телу (плохое поведение при втором нажатии)

0 голосов
/ 09 января 2020

Я пытаюсь использовать шпион с плавной прокруткой для элемента, не относящегося к телу, и я не могу добиться успеха, чтобы он работал правильно, чего мне не хватает? Это работает для тела, но не работает для разделов или divs et c. Второй щелчок к элементу nav имеет неправильное поведение.

Я хотел бы использовать плавную прокрутку для других элементов, кроме body.

Я пытаюсь решить несколько дней, но не могу найти решение. 

<section>
<div id="nav" class="active-spy target-cstm">
  <ul class="nav">
    <li>
      <a href="#first">1st</a>
    </li>
    <li>
      <a href="#second">2nd</a>
    </li>
    <li>
      <a href="#third">3rd</a>
    </li>
    <li>
      <a href="#fourth">4th</a>
    </li>
  </ul>
</div>
<div id="first">
  first div
</div>
<div id="second">
  second div
</div>
<div id="third">
  third div
</div>
<div id="fourth">
  fourth div
</div>
</section>

#nav {
  position: fixed;
  right: 1em;
  min-width: 10em;
}

.active {
  background-color: #f9f;
}

div:not(#nav) {
  height: 500px;
}
section {height:200px; position:relative; overflow-y:scroll; background:grey;}

$("section").scrollspy({
  target: ".target-cstm"
});

$(document).on('click', 'a', function(event) {
  $('section').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, {
    duration: 300,
    start: function() {
      $("#nav").removeClass("active-spy");
    },
    complete: function() {
      $("#nav").addClass("active-spy");
      $(".active").removeClass("active");
      $(event.target.parentNode).addClass("active");
    }
  });
});

Вы можете проверить здесь: https://jsfiddle.net/digitayfun/vcq2hkfu/5/

...