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事件时，都会将元素向左移动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>

您可能还想了解取消滚动事件，因为它可能会导致性能问题，但这取决于DOM相对于动画元素的复杂程度。