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（没有section-number）：

.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/

动画div高度取决于滚动，没有滞后

1 个答案: