我有一个页面有一个简单的div。如果div在页面的顶部,背景图像(一个很长的垂直壁纸)也应该只显示顶部。如果我们一直向下滚动,那么在底部的最后一个区域,将显示背景的底部。其效果是,它就像一个视差,内容和背景图像的滚动同时发生,并相互缩放。
我该怎么做?
更新:我的尝试是这样的:
function setupMainContent(){
$("#programming").delay(1000).fadeIn(1000, function(){
$(window).scroll(function(){
var current = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
var scale = 100*(current/bottom);
$('body').css({
'background-position':scale+'%'
});
});
}
然而,我真的不知道如何使用引号中的变量。
更新:我用这个开始工作:
function setupMainContent(){
$("#programming").delay(1000).fadeIn(1000, function(){
$(window).scroll(function(){
var current = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
var scale = 100*(current/bottom) + "%";
document.body.style.backgroundPosition = "center " + scale;
});
});
}
但这似乎对业绩产生了非常不利的影响。有什么方法可以让它反应更快吗?
CSS:
background-attachment: fixed;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
这对我有效:
function setupMainContent(){
$("#programming").delay(1000).fadeIn(1000, function(){
$(window).scroll(function(){
var current = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
var scale = 100*(current/bottom) + "%";
document.body.style.backgroundPosition = "center " + scale;
});
*/
});
}