CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3324440
user3324440

Reputation: 45

How can I make a fixed background image not stay fixed on scroll?

Yeah that title may have been confusing but here's why.

I have a donation counter that I want to use on a website underneath a sidebar navigation. The problem is, the way I created the donation counter was in codepen with fixed background images. Stupid me didn't consider that if someone scrolls the entire thing will go wack, I'm fairly new to coding so don't know of a better way. Here's my code and a JSfiddle, anyone have any ideas on how I can fix my problem, if there's no way any suggestions on how to create it without using a background image?

http://jsfiddle.net/LMqSB/ (I added text in so you can scroll)

<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");

Upvotes: 1

Views: 349

Answers (2)

Anubhav
Anubhav

Reputation: 7208

just set the background positions to left and bottom: http://jsfiddle.net/LMqSB/5/

and also removed 'fixed' from the background

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

Upvotes: 1

zoplonix
zoplonix

Reputation: 1072

In the css for .container, change

position:relative

to

position:fixed

Then adjust the top and left values accordingly

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

Upvotes: 0

Related Questions