cache background scrolling image position for other pages
<p>I'm working on a site which has a scrolling background image. When i go to another page on the site the animation starts at the beginning. Is there a way to cache the position so that when i go to another page the animation picks up from where it left off?</p>

<p>here is the code i'm using</p>

<pre><code>&lt;head&gt;

&lt;style&gt;

body{
width:100%;
}

#pageWrap{
width:100%;
position:absolute;
background:#96c7ec;
}

#contentTop{
width:100%;
height:545px;
background:url('../img/bbClouds.png') repeat-x;
border-bottom:5px solid #41260c;
}

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="pageWrap"&gt;

&lt;div id="contentTop"&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

&lt;script&gt;

var scrollSpeed = 70;       // Speed in milliseconds
var step = 1;               // How many pixels to move per step
var current = 0;            // The current pixel row
var imageWidth = 1500;     // Background image width
var headerWidth = 1500;     // How wide the header is.

//The pixel row where to start a new loop
var restartPosition = -(imageWidth - headerWidth);

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.
$('#contentTop').css("background-position",+current+"px 0px");


}

//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed);

&lt;/script&gt;

&lt;/body&gt;
</code></pre>

<p>any help or pointers greatly appreciated</p>

<p>thank you</p>
