仅限Chrome：使用固定位置滚动问题重叠滚动div
根据这个答案Overlay divs on scroll我试图做同样的效果。
当你滚动时，这些部分被叠加在同一个地方 – 一个堆叠在下一个上面。
在Firefox上 – IE工作正常但在Chrome（最新版本 – 版本31.0.1650.63 m）上滚动时，下一张幻灯片开始播放该部分的内容，即重叠，正在被退回。
逻辑：
当下一张幻灯片/部分即将到来时，设置position:fixed; 到将重叠的部分。
基础html
//conten goes here with img etc. 
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 = 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中工作，因为布局非常简单并且div没有屏幕的高度。 在我的网站，我想因为div占据了屏幕的高度，我有很多图像，文本等问题发生。
所以问题发生在该部分采用类部分固定并且部分内部的位置被设置为固定的那一刻。
编辑
我也把nicescroll.js放到了滚动的地方。 问题仍然存在，但“更顺畅”。
确保所有位置都到位的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
你试图通过“固定div”实现的是视差滚动 。 容器的重叠是有目的地完成的，以实现真实的外观，所以你添加背景图像后你的小提琴是完美的。
如果您不想要这种效果，只需更改：
.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; }
我正在做一个基本的demo 。 你的设计很有趣（：
膝盖小提琴