Animate.Scroll html，页面命中偏移后的正文 - 非常接近（参见 Fiddle）

Question

我试图在页面向下滚动一定量后触发 window 滚动到新位置。我的代码可以正常工作，但现在无法向上滚动。

$(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

滚动一次后，您只需使用 .off("scroll"):

取消绑定 window 的滚动事件处理程序

$(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>

Answer 2

如果你想运行一次

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 进行比较然后将标志设置为 false 或使用 .off('scroll').

取消绑定事件

Animate.Scroll html，页面命中偏移后的正文 - 非常接近（参见 Fiddle）

Animate.Scroll html,body after page hits offset - Very close (see Fiddle)

html

jquery

scroll

window

jquery-animate