jquery - 如何使用 jquery 检测滚动位置而不绑定(bind)滚动事件？

Question

我正在创建一个电梯模型，但有两件事造成了麻烦。

1. 正在更新 .floor-number以反射(reflect)当前楼层。

   看来我应该改变.floor-number内容属性如下:

   .content-property {
   visibility: hidden;
   }
   .content-property::after {
   visibility: visible;
   content: "3";
   }
   

   然后检测用户何时停止滚动并使用 jQuery 的 addClass 添加上述 css。但这确实很笨拙。

2. 显示绿色 .up电梯上行时指示灯呈红色.down电梯下行时指示灯。

演示: https://jsfiddle.net/5rzzbunk/2/

Answer 1

对于第一部分，您可以简单地使用:

var current_floor = $(this).html();
$('.floor-number').html(current_floor);

这将更新.floor-number以反射(reflect)当前楼层。

---

要检测滚动，您需要使用 scroll() 函数:

(function () {
    var previousScroll = 0;
    $(window).scroll(function () {
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
           $('.up').fadeOut(100);
           $('.down').fadeIn(100);
       }
       else {
           $('.down').fadeOut(100);
           $('.up').fadeIn(100);
       }
       previousScroll = currentScroll;
    });
}());

---

<强> Here is an Example 这涵盖了您问题的两个部分。