Chrome only: overlay divs on scroll with fixed position scroll

Question

Based on this answer Overlaying divs on a scrollbar I'm trying to make the same effect.

When you scroll through sections, they overlap each other in the same place - one stacked from top to top.

In firefox - IE works fine, but on chrome (the latest version is version 31.0.1650.63 m), when you scroll and the next slide starts to flow, the contents of the section that overlaps bounce.

Logics:

When the next slide / section arrives, set position:fixed; to the section that will overlap.

Basic 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> 

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

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 plain text work file in the form of content http://jsfiddle.net/amustill/wQQEM/

The jsfiddle file works in chrome because the layout is very simple and divs does not have screen height. On my site, I think because divs takes up the height of the screen and I have a lot of images, text, etc. A problem arises.

Thus, the problem arises at the moment when the section fixes the class section and the position of the-inner section is fixed.

EDIT

I put nicescroll.js to make the scroll a little smoother. The problem is still happening, but "smoother."

Answer 1

Javascript, which ensures that all positions are in place, does not start until the user starts scrolling. So what happens is that they start scrolling and then run javascript, returning everything to its place. This is what creates the bouncing effect.

To fix this, just make sure that the scroll event fires as soon as you hook up the scroll event before the user can scroll themselves.

It is really quite simple:

JS:

 /* ... */ // Bind our function to window scroll _window.bind('scroll', function() { updateWindow(); }); // Call the event to make sure everything is set _window.scroll(); 

Perhaps you could just run the updateWindow () function, but I could not verify this, since the function was not shown when viewing your site.

Edit:

You seem to be talking more than a rebound that has been going on since the very first section. I hardly perceive bouncing on any of the other sections when I browse, and I doubt that your users either. However, if this was a problem, it seems to be caused by some inefficiency when the scroll () event was triggered in chrome. This answer may shed light on you: fooobar.com/questions/200382 / ...

Answer 2

What you are trying to achieve with "fixed divs" is called parallax scrolling . The overlay of containers is done purposefully to achieve a real look, so your violin is great after adding a background image.

If you do not want this effect, just change:

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

:

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

Answer 3

I am doing a basic demo . Your design is interesting (:

Knee fiddle