背景与内容匹配的顶部和底部滚动？

问题描述：

我有一个简单的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

如果应用此CSS到div，图像的一部分将显示为div的背景将随着div向下移动而改变。如果这不是你想要的，请澄清你正在寻找的行为。 – radiaph 2015-04-03 01:01:34

页面有一个约500px高的背景图像（不是div）。页面上有一个div，比如1000px。当我们滚动页面时，div和backround图像将会前后滚动，以便：当我们是div的顶部时，我们会看到背景图像的顶部。当我们是div的底部时，我们会看到背景图像的底部。 – 2015-04-03 02:04:51

答

这为我工作：

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; 
    }); 
    */ 
}); 
}

背景与内容匹配的顶部和底部滚动？

相关推荐