背景與內容匹配的頂部和底部滾動？

我有一個簡單的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; 
     }); 
    }); 
}

但似乎對性能非常惡劣的影響。有什麼辦法可以讓它更快速響應嗎？

來源

2015-04-03 Toni_Entranced

CSS：

background-attachment: fixed;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

來源

2015-04-03 00:51:58 radiaph

如果應用此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; 
    }); 
    */ 
}); 
}

來源

2015-04-03 04:00:04

背景與內容匹配的頂部和底部滾動？

回答

相關問題