动画.滚动html，正文后的页面点击偏移-非常接近(见Fiddle)

Question

我试图在页面向下滚动一定量后触发窗口滚动到新位置。我已经把代码处理好了，但现在我无法向上滚动。

这是一个篡改的代码

$(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 50;  
if(y_scroll_pos > scroll_pos_test) {
 $('html, body').animate({
 scrollTop: $( ".here" ).offset().top
 }, 500);
}
else{}
});

我想知道是否有一种方法可以在代码运行一次后阻止它工作。或者更好的是，只有当滚动条向下滚动超过某一点时，它才能工作。如有任何帮助或建议，我们将不胜感激！

Answer 1

如果只想运行一次

var scrolled = false;
$(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 50;             
if(!scrolled && y_scroll_pos > scroll_pos_test) {
    scrolled = true;
    $('html, body').animate({
        scrollTop: $( ".here" ).offset().top
    }, 500);
    $("body").css("background-color","#000");
}
if (y_scroll_pos < scroll_pos_test) {
    scrolled = false;
    $("body").css("background-color","#FFF");
}
});

如果你想让它只在滚动条向下滚动到某个点时工作，你可以用window.scrollY获得当前滚动位置，并将其与元素的offset().top进行比较，然后将flag设置为false或用.off('scroll')取消绑定事件。

Answer 2

滚动一次后，只需要使用.off（"scroll"）:将滚动事件处理程序从窗口中解除绑定

$(window).scroll(function() {
  var y_scroll_pos = window.pageYOffset;
  var scroll_pos_test = 50;
  // set to whatever you want it to be
  if (y_scroll_pos > scroll_pos_test) {
    $('html, body').animate({
      scrollTop: $(".here").offset().top
    }, 500);
    $("body").css("background-color", "#000");
    $(window).off("scroll");
  } else {
    $("body").css("background-color", "#FFF");
  }
});

body {
  height: 2000px;
}
.here {
  position: absoulte;
  margin-top: 1500px;
  background-color: red;
  height: 150px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="here"></div>