如何使固定的背景圖像不能固定在滾動條上？

Question

是的，該標題可能令人困惑，但這就是原因。

我在側邊欄導航下方的網站上有一個捐贈櫃台。 問題是，我創建捐贈計數器的方式是使用固定背景圖片的Codepen。 愚蠢的我沒有想到，如果有人滾動整個內容會大失所望，那么我對編碼還是很陌生，所以不知道有什么更好的方法。 這是我的代碼和JSfiddle，如果沒有在不使用背景圖像的情況下如何創建它的建議，那么有人對如何解決我的問題有任何想法？

http://jsfiddle.net/LMqSB/ （我在其中添加了文字，以便您可以滾動）

<div class="container">
<div class="bw"></div>
<div class="show"></div>
<div id="bar" data-total="100">
    <div class="text">Currently at <br/><span>70</span><br><i>Click To Give</div>
</div>

CSS

.bw {
width:100%;
height:100%;
position:absolute;
bottom:0; background:url(http://fdfranklin.com/usf-bull-bw.png) fixed left top;
background-clip:content-box;
}
.show {
width:100%;
height:0%;
position:absolute;
bottom:0; background:url(http://fdfranklin.com/usf-bull.png) fixed left top;
background-clip:content-box;
}

jQuery的

percent = $('#bar div span').html();
total = $('#bar').attr('data-total');
percentStart = 0;

setInterval(function() {
$('.show').css('height',percentStart/total*100+'%');
$('#bar').css('height',percentStart/total*100+'%');
$('#bar div span').html('%'+percentStart);
if(percentStart<percent) {percentStart=percentStart+1;}
},35);

$("#bar div").addClass("load");

Answer 1

只需將背景位置設置為左側和底部： http : //jsfiddle.net/LMqSB/5/

並從背景中刪除了“固定”

background: url(http://fdfranklin.com/usf-bull-bw.png) left bottom

Answer 2

在.container的CSS中，更改

position:relative

至

position:fixed

然后相應地調整top和left值

http://jsfiddle.net/LMqSB/4/