Animate div-height depending from scrolling, without lag

Question

I have some sections and want to set the height of a separate div (fixed) depending to the scrolling (for a parallax effect). Every scroll action $(window).scroll(function() {...}); the following code is fired. That works fine, but very laggy, because of the CPU usage, I think. You know how to get the whole thing into the GPU usage with translate or something else.

        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%");
            }
        });

the parallax divs (without the section-numbers):

.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: ...;
}

Here is a sample: http://jsfiddle.net/c5axqoo1/ On retina and with more content its a way more laggy!

Why I used height ? Because I want the background-position fixed.

Pre-Thanks :)

Answer 1

You could animate translateY so it uses GPU

Here's a plugin that can might help you: http://ricostacruz.com/jquery.transit/