javascript - jQuery "curtain"函数 - 最佳解决方案？

Question

我想实现与在 http://nautil.us 上类似的“幕布”效果.

我写了一个运行良好的脚本，这是我的 JSFiddle 。该函数如下所示:

  function curtain() {
    var windowHeight = $( window ).height();
    var scrollPosition = $( document ).scrollTop();
    var value = - ( windowHeight - 70 );
    var mainHeight = $( "#main" ).height();
    var bodyHeight = windowHeight + mainHeight;
    if (windowHeight - scrollPosition <= 70) {
      $( "#curtain" ).css({position: "fixed", top: value});
      $( "#main" ).css({position: "static", marginTop: windowHeight});
      $( 'body' ).height(mainHeight);
    }
    else {
      $( "#curtain" ).css({position: "static", height: windowHeight});
      $( "#main" ).css({position: "fixed", top: value, marginTop: windowHeight});
      $( 'body' ).height(bodyHeight);
    }
  }
  $( document ).ready(curtain);
  $( window ).resize(curtain);
  $( window ).scroll(curtain);

但是，我不确定这是否是最好的方法。该脚本必须在每个 window.scroll 事件上触发，恐怕即使只是滚动，它也会使用太多资源。有没有更好的解决方案？

Answer 1

您可以使用 setTimeout 来限制事件处理程序。

window.curtainTimeoutId = null;

function curtain() {

    window.clearTimeout(curtainTimeoutId);

    window.curtainTimeoutId = setTimeout(function () {
        // ...
    }, 10);

}

Fiddle

此外，如果您使用的是 underscore.js，则可以使用其 throttle 方法更简洁地实现相同的效果。