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方法更简洁地实现相同的效果。

jQuery“幕”功能 - 最佳解决方案？

1 个答案: