Question

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

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

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

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

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

Answer 1

如果我理解你的话，你想在每次窗口滚动超过50px时执行一些动作。

您应该跟踪跟踪状态的 scrolledPast 变量，而不是在“全局”（在docReady上面的情况下）跟踪 scrollTop 。滚动并在滚动回调中更新。如果 scrolledPast 变量为false，但 scrollTop 为＆gt; 50，设置变量＆amp;运行你的代码。下次运行滚动回调时（此后可能非常快）， 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>

滚动时Scrolltop全局变量未更新

1 个答案: