Scrolltop 全局变量未在滚动时更新

Question

已经搞砸了一段时间，但我似乎无法在 window.scroll 函数之外访问我的 scrollTop 变量。

我显然可以将我的代码放在scroll 函数中。但是，每次滚动时都会读取我的代码，这是我不想要的。我想检查 scrollTop 是否大于 50（例如）然后运行几行代码并继续。

我想知道用户在我的页面上滚动了多少。这就是 scrollTop 函数的作用。但是我希望能够检查滚动函数之外的 scrollTop 变量。虽然，由于某种原因它不起作用。无论有无 document.ready。

到目前为止，这是我的代码：

    var scrollTop = $(window).scrollTop();

    $(window).scroll(function(){
        scrollTop = $(window).scrollTop();
    });
    
    $('.label').html(scrollTop + 'px');

Answer 1

如果我的理解正确，您希望在每次窗口滚动超过 50 像素时执行一次操作。

您应该跟踪一个跟踪状态的 scrolledPast 变量，而不是在“全局”（在上面 docReady 的情况下）级别跟踪您的 scrollTop滚动并在 scroll 回调中更新。如果 scrolledPast 变量为 false，但您的 scrollTop 大于 50，请设置变量并运行您的代码。下次运行 scroll 回调时（可能很快），scrolledPast 变量将设置为 true，因此不要运行代码。当您向上滚动到 50 以下时，重置 scrolledPast 变量。

代码时间：

var scrolledPast = false; //global flag
$(function() { //doc ready
    $(window).on('scroll', function() { //let's handle this, eh?
        var scrollTop = $(this).scrollTop();
        if (scrollTop > 50 && !scrolledPast) { //just scrolling past 50
          scrolledPast = true;
          myCode();
        }
        else if (scrollTop <= 50) { //reset our flag
          scrolledPast = false;
        }
    });
 });
 
 function myCode() {
    //scrolled past 50, do stuff!
    console.log('You did it!');
 }

div {
  height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  This is gonna be yuuuuuggggeeee!
</div>