Chrome only: Overlay divs on scroll with fixed position scrolling issue

Question

Based on this answer Overlay divs on scroll I am trying to do the same effect.

As you scroll the sections are being overlayed in the same place-- one stacked on top the next.

On firefox - IE is working fine but on chrome (last version - Version 31.0.1650.63 m) when you scroll and the next slide start to coming the content of the section, that being overlapped, are being bounced.

The logic:

When the next slide/section is coming set position:fixed; to the section that will be overlapped.

The base html

<section class="section">
    <div class="section-inner">
        <div class="table-cell">
            <div class="container clearfix">
                //conten goes here with img etc.
            </div>
        </div>
        <img src="imgsrc" class="secondary-background-image">
    </div>
</section>

The css:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    overflow-x: hidden;
}
.section {
    position: relative;
    z-index: 5;
    background: #FFFFFF;
}
.section-fixed {
    z-index: 1;
}
.section-inner {
    width: 100%;
    height: inherit;
    display: table;
}
.section-fixed .section-inner {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}
.table-cell {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    height: inherit;
}
.section .secondary-background-image {
    position: absolute;
    bottom: 0;
    left: 0;
}
.container {
    position: relative;
    width: 700px;
    margin: 0 auto;
    padding: 0;
}
.clearfix:before, .clearfix:after {
    content:" ";
    display: table;
}
.clearfix:after {
    clear: both;
}

The base js:

$(function() {

    // Set up vars
    var _window = $(window),
        panels = $('.section'),
        winH = _window.height();
        panelsY = [];


    // Cache position of each panel
    $.each(panels, function(i, el) {
        $(this).css('height', winH);
        panelsY.push(panels.eq(i).offset().top);
    });

    // Bind our function to window scroll
    _window.bind('scroll', function() {
        updateWindow();
    });

    // Update the window
    function updateWindow() {
        var y = _window.scrollTop();

        // Loop through our panel positions
        for (i = 0, l = panels.length; i < l; i++) {
            /* 
                Firstly, we break if we're checking our last panel,
                otherwise we compare if he y position is in between
                two panels
            */
            if ((i === l - 1) || (y >= panelsY[i] && y <= panelsY[i+1])) {
                break;
            }
        };

        // Update classes
        panels.not(':eq(' + i + ')').removeClass('section-fixed');
        panels.eq(i).addClass('section-fixed');
    };

});

A working file with a simple text as content http://jsfiddle.net/amustill/wQQEM/

The jsfiddle file is working in chrome because the layout is very simple and the divs don't have the height of the screen. In my site I guess because the divs takes the height of the screen and I have a lot of images , text etc the issue occurs.

So the issue occures the moment the section takes the class section-fixed and the position of section-inner is being set to fixed.

EDIT

I put nicescroll.js also to make the scroll a bit smoother. The problem still occurs but 'smoother'.

Answer 1

The javascript that makes sure that all of the positions are in place doesn't run until after the user has started scrolling. So what happens is that they start scrolling and then the javascript runs, putting everything back into place. This is what creates the bouncing effect.

To fix it just make sure that the scroll event runs as soon as you have attached the scroll event, before the user has a chance to scroll themselves.

This really is simple enough:

JS:

/* ... */

// Bind our function to window scroll
_window.bind('scroll', function() {
    updateWindow();
});

// Call the event to make sure everything is set
_window.scroll();

You could probably just run the updateWindow() function too, but I wasn't able to test that as the function wasn't exposed when looking at your site.

Edit:

It looks like you might be talking about more than the the bounce that occurs with the very first section. I can hardly perceive bouncing on any of the other sections as I scroll through, and I doubt your users will either. However, if it was a problem it looks to be caused by some inefficiency with the firing of the scroll() event in chrome. This answer might shed some light for you there: https://stackoverflow.com/a/11039468/1824527

Answer 2

What you're trying to achieve with the "fixed divs" is called parallax scrolling. The overlaying of the containers are done purposefully to achieve a real look, so your fiddle is perfectly fine after you add a background image.

If you don't want this effect, simply change:

        .panel-fixed .panel-inner {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        }

to this:

        .panel-fixed .panel-inner {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        }

Answer 3

I'm making a basic demo. Your design is interesting (:

Knee's Fiddle