1

そこで、Paul Irish の requestAnimationFrame を使用して、ページにサイドバーを「貼り付け」ます。少なくとも Webkit ブラウザーでは、これにより、ウェイポイントなどの他のソリューションよりもパフォーマンスが大幅に向上することがわかりました。ただし、Firefox では、ページのスクロールを開始すると CPU が屋根を通過し、これが原因でページが非常に遅くなることに気付きました。これを間違って実装していますか、それとも Firefox 用に別の方法を使用する必要がありますか?

    (function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

window.widget_is_sticky = false;
window.widget_is_locked = false;

$(function(){

  (function animloop() {
    requestAnimationFrame(animloop);
    if (adjust_networth) {
      if (self.pageYOffset) {
        yScroll = self.pageYOffset;
      } else if (document.documentElement && document.documentElement.scrollTop) {
        yScroll = document.documentElement.scrollTop;
      } else if (document.body) {// all other Explorers
        yScroll = document.body.scrollTop;
      }
      update_networth_position(yScroll);
    }
  })();
});

// Separate file written in CoffeeScript
window.update_networth_position = ( offset ) ->
  if offset >= 259
    if !window.widget_is_sticky
      window.widget_is_sticky = true
      $('.widgets').addClass 'sticky'
    else if !window.widget_is_locked and widget_is_at_boundary(offset)
      window.widget_is_locked = true
      $('.widgets').addClass 'locked'
    else if !widget_is_at_boundary(offset) and window.widget_is_locked
      window.widget_is_locked = false
      $('.widgets').removeClass 'locked'
  else
    return false if !window.widget_is_sticky

    $('.widgets').removeClass 'sticky'
    window.widget_is_sticky = false


widget_is_at_boundary = ( offset ) ->
  offset = offset - $('section.top-section').outerHeight(true)
  maximum_height = $('section.main-content div.content:first-child').outerHeight(true)
  widget_height  = $('section.main-content .widgets').outerHeight(true)

  if (offset + widget_height) > maximum_height
    return true
  else
    return false

どんな助けでも大歓迎です！また、これにアプローチする方法については、まったく異なるソリューションに対してオープンです（ただし、ウェイポイントはうまく機能するほどパフォーマンスが高くありませんでした）。

4

1 に答える 1

0

誤報ですみません。パフォーマンス ヒットは、私が使用していたバックグラウンド CSS テクニックから来ていることがわかりました。今回はrequestAnimationFrameは安全です:)

于 2012-07-12T20:28:49.157 に答える