Home/ Questions/Q 4618644
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T02:17:47+00:00

I’m working on a site which has a scrolling background image. When i go

  • 0

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?

here is the code i’m using

<head>

<style>

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;
}

</style>

</head>

<body>

<div id="pageWrap">

<div id="contentTop"></div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>

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

</script>

</body>

any help or pointers greatly appreciated

thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You use this jQuery cookie plugin.

    Usage

    • Setting a value: $.cookie('the_cookie', 'the_value');
    • Retrieving a value: $.cookie('the_cookie');

    Add an event listener to $(window).unload event then set the cookie background position, then on $(window).load get the cookie and set the background position.

    As a side note, I suggest you use .animate it’s built into jQuery core:

    var startAnimate = function() {
    $('#contentTop')
      .css('background-position', 0)
      .animate({ backgroundPosition: imageWidth },
              { duration: 3000, complete: startAnimate });
};

startAnimate();
    • 0