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/

并删除＆＃39;已修复＆＃39;从背景

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/

如何使固定的背景图像不能保持固定滚动？

2 个答案: