Reputation: 19
Basically my code is making this image slide up when I want it to slide to the right. What's wrong with it?
HTML
<div id="wrapper">
<div id="header">
</div>
</div>
JS
var scrollSpeed = 70; // Speed in milliseconds
var step = 1; // How many pixels to move per step
var current = 0; // The current pixel row
var imageHeight = 4300; // Background image height
var headerHeight = 300; // How tall the header is.
//The pixel row where to start a new loop
var restartPosition = -(imageHeight - headerHeight);
function scrollBg(){
//Go to next pixel row.
current -= step;
//If at the end of the image, then go to the top.
if (current == restartPosition){
current = 0;
}
//Set the CSS of the header.
$('#header').css("background-position","0 "+current+"px");
}
//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed);
Here is the code: http://pastebin.com/9FpvSBxm
Upvotes: 0
Views: 249
Reputation: 19
Update: I figured it out.
$('#header').css("background-position","0 "+current+"px");
I changed the 0 to a 1 and it fixed it. Now this was purely by luck, but why did that fix it?
Upvotes: 0
Reputation: 388446
You need to increment the value
function scrollBg(){
//Go to next pixel row.
current += step; //increment instead of decrement
//If at the end of the image, then go to the top.
if (current == restartPosition){
current = 0;
}
//Set the CSS of the header.
$('#header').css("background-position",current +"px 0"); // parameters are right top not top right
}
Demo: Fiddle
Upvotes: 1