jQuery кнопка скользит в прокрутке

Question

Я пытаюсь вставить кнопку, когда позиция прокрутки находится между двумя значениями pxiel, и выдвигается, когда ее нет. Следующий код на самом деле не работает, так как кнопка иногда вставляется, а иногда нет, и большую часть времени не находится между определенными значениями пикселей. Это проблема загрузки скрипта или мой код jQuery неверен?

  var y = jQuery(this).scrollTop();
  if (y > 700 && y < 1300) {
    jQuery('.side-button-wrap').animate({ left: '0px' });
  } else {
    jQuery('.side-button-wrap').animate({ left: '-200px' });
  }
});´´´

Answer 1

Проблема в том, что значение -200px равно кумулятивно . В результате каждый раз, когда происходит событие scroll, вы перемещаете элемент еще на 200 пикселей влево.

Чтобы исправить это, вам нужно сделать идемпотентным действие. Другими словами, независимо от того, сколько раз событие запускается, результат должен быть одинаковым. Для этого используйте CSS, чтобы выполнить переход в фиксированное положение. Затем просто переключите соответствующий класс в зависимости от положения вертикальной прокрутки. Попробуйте это:

$(window).on('scroll', function() {
  var y = jQuery(this).scrollTop();
  $('.side-button-wrap').toggleClass('slide-in', y > 700 && y < 1300)
});

html,
body {
  height: 3000px;
}

.side-button-wrap {
  position: fixed;
  top: 20px;
  right: -100px;
  width 100px;
  transition: right 0.3s;
}

.side-button-wrap.slide-in {
  right: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Scroll down!
<div class="side-button-wrap">
  <button>Lorem ipsum</button>
</div>

Возможно, вы захотите посмотреть на отмену события прокрутки , так как это может привести к проблемам с производительностью, но это зависит от о том, насколько сложен DOM по отношению к анимируемым элементам.