仅限Chrome浏览器：使用固定位置滚动功能滚动覆盖div的问题

Question

基于此回答Overlay divs on scroll我试图做同样的效果。

当你滚动的部分被覆盖在同一个地方 - 一个堆积在下一个。

在Firefox上 - IE浏览器工作正常，但在Chrome上（最新版本 - 版本31.0.1650.63米），当您滚动时，下一张幻灯片开始显示正在重叠的部分内容被反弹。

逻辑：

当下一幻灯片/部分即将设置position:fixed;到将要重叠的部分。

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

基础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'); 
    }; 

}); 

用一个简单的文本内容的工作文件，http://jsfiddle.net/amustill/wQQEM/

的jsfiddle文件在chrome中工作，因为布局非常简单，divs没有屏幕高度。在我的网站，我猜是因为divs需要屏幕的高度，而且我有很多图像，文本等问题发生。

因此，问题发生在该部分采用类部分固定并且部分内部的位置被设置为固定的时刻。

编辑

我把nicescroll.js也使滚动更加顺畅。问题仍然存在，但“平滑”。

Answer 1

这可以确保所有的位置都在地方，直到不运行的用户开始滚动后的JavaScript以发生的事情是，他们开始滚动，然后。 javascript运行，把一切都放回原处，这就是创建弹跳效果的原因。

要解决这个问题，只需确保滚动事件在附加滚动事件后立即运行，然后用户有机会滚动自己。

这真的是很简单的：

JS：

/* ... */ 

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

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

你很可能只是运行updateWindow（）函数，但我却没有能够测试作为函数不当看到您的网站时暴露。

编辑：

看起来你可能是说比，与第一个部分出现反弹更多。当我滚动浏览时，我几乎感觉不到任何其他部分的弹跳，而且我怀疑你的用户是否也会这样做。但是，如果这是一个问题，它看起来是由于在chrome中触发scroll（）事件导致一些低效率而导致的。这个答案可能会对你有所帮助：https://stackoverflow.com/a/11039468/1824527

Answer 2

你试图用“固定格”实现的内容叫做parallax scrolling。叠加的容器有目的地实现了真正的外观，所以你添加背景图像后，你的小提琴就完美了。

如果你不想要这个效果，只需更改：

 .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

我正在做一个基本的demo。你的设计很有趣（：

Knee's Fiddle