Question

I have a JavaScript-driven parallax slider, adapted from this tutorial (http://tympanus.net/codrops/2011/01/03/parallax-slider/), and a small script which fades the slider image out after scrolling past a certain point.

Here is the script:

    $(document).ready(function() {

        $(window).scroll(function () {
            var $slider = $('.pxs_slider');
            var sTop = $('body').scrollTop();
            var sTop_ff = $('html').scrollTop();
            var opacity = 1;

            if(sTop < 40) {
                opacity = 1;
                if(sTop_ff < 40) {
                    opacity = 1;
                } else {
                    opacity = 0;
                }
            } else  {
                opacity = 0;
            }

            $slider.css('opacity', opacity);
        });
  });

It all works fine, but scrolling becomes significantly sluggish during this transition. However, I’ve found it only really has this issue in Chrome of all browsers. There is no performance hit in Firefox.

Is there a more efficient approach to this effect I could try?

Answer 1

Cache $('.pxs_slider') so it’s not queried every time the scrollbar moves is the big one:

$(document).ready(function() {
    var $slider = $('.pxs_slider');

    $(window).scroll(function() {
        var sTop = $('body').scrollTop();
        var sTop_ff = $('html').scrollTop();
        var opacity = 1;

        if(sTop < 40) {
            opacity = 1;
            if(sTop_ff < 40) {
                opacity = 1;
            } else {
                opacity = 0;
            }
        } else  {
            opacity = 0;
        }

        $slider.css('opacity', opacity);
    });
});

Also, $(window).scrollTop(), I believe, is the correct way:

$(document).ready(function() {
    var $slider = $('.pxs_slider');

    $(window).scroll(function() {
        $slider.css('opacity', $(window).scrollTop() < 40 ? 1 : 0);
    });
});