保持背景圖像的固定位置和居中

在我的項目中，我需要在容器的可見部分的中心顯示小圖像，相對於窗口，即.loader。即使用戶滾動頁面，圖像也應該在.loader的中心可見。保持背景圖像的固定位置和居中

我成功實現了這一點，但現在我正面臨一個邊框，當用戶將頁面滾動到「標題」或「向下到頁腳」時，小圖像被隱藏起來。 demo。

這實際上是正常的行爲，但在這些邊緣案例中，我希望圖像堅持頂部/底部容器的。

我想要什麼：

請將小圖像總是在.loader容器的中心。（我已經實現了這個）
當滾動到.loader容器的任何目的，圖像應堅持這一目標，而不是躲在後面的容器。

只使用的CSS中的溶液是優選的。我正在尋找IE9 +，Chrome和Firefox的瀏覽器支持。

.header { 
 
    height: 600px; 
 
    width: 650px; 
 
    background-color: grey; 
 
} 
 
.left-side { 
 
    height: 300px; 
 
    width: 150px; 
 
    float: left; 
 
    background-color: red; 
 
} 
 
.loader { 
 
    background-image: url('http://i.imgur.com/U2njI.jpg'); 
 
    margin-left: 150px; 
 
    height: 1500px; 
 
    width: 500px; 
 
    background-position: 345px center; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-color: cornflowerblue; 
 
} 
 
.footer { 
 
    height: 600px; 
 
    width: 650px; 
 
    background-color: silver; 
 
}

<div class="header"></div> 
 
<div class="left-side"></div> 
 
<div class="loader"></div> 
 
<div class="footer"></div>

來源

2014-03-04 Mr_Green

對不起，如果只是我不明白的問題。 –

@ C-link我加了一些解釋。如果你仍然不明白，請告訴我。 –

你應該使用jquery！ –

下面是一個有效的解決方案與JavaScript，我希望它的行爲是你期望它是如何。我很遺憾沒能馬上來測試它IE9，但它應該工作（DEMO）：

document.addEventListener('DOMContentLoaded',function() { 
    var loader = document.querySelector('.loader'), 
     loaderRect = loader.getBoundingClientRect(), 
     loaderTop = loaderRect.top + document.body.scrollTop, 
     loaderBottom = loaderTop + loader.offsetHeight, 
     initialBgPos = loader.style.backgroundPosition, 
     imageHeight = 141; 

    function onScroll() { 
     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 

     if(loaderTop >= (scrollTop + (window.innerHeight - imageHeight)/2)) { 
      loader.style.backgroundPosition='345px ' + (loaderTop - scrollTop) + 'px'; 
     } else if(loaderBottom <= (scrollTop + (window.innerHeight + imageHeight)/2)) { 
      loader.style.backgroundPosition='345px ' + (loaderBottom - scrollTop - imageHeight) + 'px'; 
     } else { 
      loader.style.backgroundPosition = initialBgPos; 
     } 
    } 

    window.addEventListener('scroll', onScroll); 
    onScroll();  
});

來源

2014-04-18 20:49:47

非常感謝..不知何故，我沒有得到平你的答案..我重新回到我的帖子要求賞金，並找到你的解決方案..我認爲這是不可能的只有CSS。 –

-1

要實現什麼，我想你想要的。我們必須將.loader div的位置設置爲固定，然後它將始終保持其放置位置，無論用戶是否滾動頁面，div都將滾動。在這裏是如何設置裝載器的位置固定在CSS（你可能還需要得到你的固定div的位置）：

.loader{ 
    position: fixed; 
    left: 100px; 
    top: 300px; 
}

這是你的upadted的jsfiddle：http://jsfiddle.net/Ezhb4/4/

來源

2014-03-04 11:18:56 Xanco

Xanco，主容器在哪裏？我的意思是'.loader'。 –

它可能不會出現，因爲JSFiddle結果窗口很小，試試這個：http://fiddle.jshell.net/Ezhb4/4/show/ – Xanco

它應該出現，它是我的項目中的主要容器。 –

保持背景圖像的固定位置和居中

回答

相關問題