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占据屏幕的高度，我有很多图像，文本等问题发生。

因此，当该部分修复了类部分并且部分内部的位置被设置为固定时，问题就出现了。

修改

我还将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

您尝试使用“固定div”实现的目标称为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

仅限Chrome：在固定位置滚动问题的滚动上叠加div

3 个答案: