Question

我有滚动时互相叠加的全屏div，我还添加了全屏背景图像。但是在Chrome上我有问题，当我一直向后滚动到顶部，背景下降一点，在safari中，当我开始向下滚动同样的事情发生时。我做了一个小提琴here。你可以在那里看到当你向下滚动时，当你再次向上移动时，面板的内容重叠。它在chrome中有不同的效果，当你开始向下滚动时，你可以看到背景图像有点下降。

背景图像动画会弄乱这些东西，如果我不使用它，一切正常。

#bg {
  background-image: url('https://unsplash.it/800?random');
  background-size: cover;
  z-index: -1;
  animation: zoom 10s;
  height: 100%;
  width: 100vw;
  position: absolute;
  -webkit-animation-fill-mode: forwards;
  background-attachment: fixed;
}

@keyframes zoom {
  0% { transform:scale(1,1); }
  100% { transform:scale(1.1,1.1);}
}

所以我想知道如何使用动画并保持与页面上相同的效果？

这是html：

<body>
  <div id="bg">
  </div>
  <div class="panel panel-one">
    <div class="panel-inner">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p>
    </div>
</div>

<div class="panel panel-two">
    <div class="panel-inner">
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p>
    </div>
</div>

<div class="panel panel-three">
    <div class="panel-inner">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit ligula pharetra.</p>
    </div>
</div>


</body>

负责滚动的脚本：

$(function() {

    // Set up vars
    var _window = $(window),
        panels = $('.panel'),
        panelsY = [];

    // Cache position of each panel
    $.each(panels, function(i, el) {
        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('panel-fixed');
        panels.eq(i).addClass('panel-fixed');
    };

});

Answer 1

我在margin: 0规则中添加了html, body，并在position: fixed上更改为#bg。

这updated fiddle会有效吗？

CCS改变了

#bg {
  background-image: url('https://unsplash.it/800?random');
  background-size: cover;
  z-index: -1;
  animation: zoom 10s;
  height: 100%;
  width: 100vw;
  position: fixed;
  -webkit-animation-fill-mode: forwards;
  background-attachment: fixed;
}

@keyframes zoom {
  0% { transform:scale(1,1); }
  100% { transform:scale(1.1,1.1);}
}

html, body {
  margin: 0;
  height: 100%;
}

如果没有，那么这个动画背景大小而不是缩放，这似乎是

的原因

Updated fiddle

CSS已更改

#bg {
  background: url('https://unsplash.it/800?random') no-repeat center center fixed;
  background-size: 100% 100%;
  z-index: -1;
  animation: zoom 10s;
  height: 100vh;
  width: 100vw;
  position: absolute;
  -webkit-animation-fill-mode: forwards;
}

@keyframes zoom {
  0% { background-size: 100% 100%; }
  100% { background-size: 120% 120%;}
}

html, body {
  margin: 0;
  height: 100%;
}

Answer 2

因为'身体'它。请将此代码添加到您的样式表中。

body {
    padding: 0;
    margin: 0;
}

您必须使用CSS重置代码段。

我希望这有帮助。

Javascript - div在滚动问题上覆盖div

2 个答案: