我有全屏 div，它们在滚动时相互叠加，我还添加了全屏背景图像。但是在 chrome 上，当我一直滚动到顶部时，我遇到了问题，背景稍微下降了一点，而在 safari 中，当我开始向下滚动时，同样的事情发生了。我做了一个 fiddle 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');
};
});
最佳答案
我在 html, body 规则中添加了一个 margin: 0 并在 #bg< 上更改为 .position: fixed/
请问这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%;
}
如果不是，那么这个动画背景大小而不是缩放，这似乎是原因
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%;
}
关于Javascript - div 在滚动问题上覆盖 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40326554/