Question

我正在创建一个样机电梯，但有两件事情会造成麻烦。

更新.floor-number以反映当前楼层。

我似乎应该使用content属性更改.floor-number：
```
.content-property {
visibility: hidden;
}
.content-property::after {
visibility: visible;
content: "3";
}
```
然后检测用户何时停止滚动并使用jQuery的addClass添加上述css。但这真的很笨拙。
电梯上升时显示绿色.up指示灯，电梯下降时显示红色.down指示灯。

Answer 1

首先，您可以使用：

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

这将更新.floor-number以反映当前楼层。

<小时/> 要检测滚动，您需要使用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 ，其中包含您问题的两个部分。

Answer 2

接受的答案有我的upvote但是出于好奇我写了一个小函数来计算触发的滚动事件的数量。结果因浏览器而异：

Firefox大约60（由于默认的平滑滚动，可能比其余的更高）
Chrome和Opera略低于40
Internet Explorer约20

至少在我的设置上......

http://codepen.io/anon/pen/xbNOdG

可以与显示帧率连接。如果它插入其中，它无论如何都不应该是资源大亨。但是看看并决定自己是否值得限制。

var i, first = true, then, finished, elapsed, triggers;

$(window).scroll(function() {

if (first) {
i = 0;
first = false;
then = new Date().getTime();
}

i++;
clearTimeout(finished);
checkScroll();

function checkScroll() {

finished = setTimeout(function() {
elapsed = new Date().getTime()-then-150;
triggers = Math.round(1000/(elapsed/i));
first = true;
$('#log').html(triggers + '</br>events per second');
}, 150);
}
});

如果使用这个简洁的扩展名，它可能是每个鼠标滚轮事件（默认情况下应该滚动）的单个操作：

https://plugins.jquery.com/mousewheel/

$(window).mousewheel(function(turn, delta) {

if (delta == -1) {
$('.up').fadeOut(100);
$('.down').fadeIn(100);
}
else {
$('.up').fadeIn(100);
$('.down').fadeOut(100);
}
});

当Opera开始支持它时，wheel事件可以取代它。

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

2 个答案: