javascript - jQuery 按钮在滚动时滑入和滑出

Question

当滚动位置位于两个 pxiel 值之间时，我尝试滑入按钮，而当滚动位置不在两个 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 事件时，您都会将元素向左进一步移动 200px。

要解决此问题，您需要使操作具有幂等性。换句话说，无论事件触发多少次，结果都需要相同。为了实现这一点，请使用 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>

您可能还想查看debouncing the scroll event因为它可能会导致性能问题，但这取决于 DOM 对于动画元素的复杂程度。