動畫div-height取決於滾動，沒有滯后

Question

我有一些部分，想根據滾動（為視差效果）設置一個單獨的div（固定）的高度。 每個滾動動作$(window).scroll(function() {...}); 以下代碼被觸發。 我認為這可以正常工作，但是由於CPU的使用，它非常緩慢。 您知道如何通過轉換或其他方法將整個事情納入GPU的使用。

        var windowHeight = $(window).height();
        var sectionNumber = 0;

        $("main section").each(function() {
            sectionNumber++;
            var secPosition = $(this).position();
            if( ( $(window).scrollTop() + windowHeight ) > secPosition.top ) {
                var secScrollValue = ($(window).scrollTop() + windowHeight) - secPosition.top;
                $(".parallaxBg" + sectionNumber).css("height", (windowHeight - secScrollValue) + "px");
            } else {
                $(".parallaxBg" + sectionNumber).css("height", "100%");
            }
        });

視差div（無節號）：

.parallaxBg {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background-position: 0px 0px;
  background-size: 100%;
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-image: ...;
}

這是一個示例： http : //jsfiddle.net/c5axqoo1/在視網膜上並且內容更多時，它的處理方式會更慢！

為什么我用height ？ 因為我要固定background-position 。

謝謝:)

Answer 1

您可以設置translateY的動畫，使其使用GPU

這是一個可以幫助您的插件： http : //ricostacruz.com/jquery.transit/