jquery - 仅限 Chrome : Overlay divs on scroll with fixed position scrolling issue

Question

基于这个答案Overlay divs on scroll我正在尝试实现相同的效果。

当您滚动时，这些部分将叠加在同一个地方——一个堆叠在下一个之上。

在 firefox 上 - IE 工作正常，但在 chrome(最新版本 - 版本 31.0.1650.63 m)上滚动时，下一张幻灯片开始出现该部分的内容，重叠的内容被退回。

逻辑:

当下一张幻灯片/部分出现时，将 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 中运行，因为布局非常简单，而且 div 没有屏幕的高度。在我的网站上，我猜是因为 div 占了屏幕的高度，而且我有很多图像、文本等，所以出现了这个问题。

所以问题发生在该部分采用类 section-fixed 并且 section-inner 的位置被设置为固定的时候。

编辑

我还放置了 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