1. Computing
This is a web page object.

Web Page Animation

3. Scrolling With the Page

clr gif
Join the Discussion

Questions? Comments?

We have already learned how to define a web page object and how to hide it until the web page has finished loading. In this tutorial we will look at how we can position our object so that it holds a constant position in the browser window independently of the scrolling of the web page. You will see a working example of this in the top right hand corner of the browser window after the page finishes loading. As you can place whatever you want into the object (such as links to other web pages) we now have our first animation that is actually useful.

The first thing we will do is to update our stylesheet definition to make the object stand out from the surrounding page. Let's set the background to grey, centre the text on the object and make sure that it appears in front of whatever else we have on the page.

#myobj {background-color:#cccccc;text-align:center;
z-Index:999;
visibility:hidden;position:absolute;
top:300px;left:200px;width:200px;}

If we want to position our object relative to the right or bottom edge of the browser window (or both) then we will need to determine how wide and/or high the window is. We will also need to be able to tell how far the page has been scrolled in order to determine the placement of our object. As with the previous functions that we have needed I have written a set of functions that obtain the window size and scroll position that you can copy and add to the bottom of our already existing animhead.js that will handle this task for you

The next step is to add the necessary code to our existing start function that will position the object where we want it to be as well as to have the function called again if the page has been scrolled. For example to position it slightly down from the top of the screen and slightly in from the right hand edge we can use:

function start() {
var x = (posRight()-230) + 'px';
var y = (posTop()+10) + 'px';
moveObjTo('myobj',x,y);

setObjVis('myobj','visible');
}
window.onload = start;
window.onscroll = start;

The posTop and posRight functions have come from the new set of functions we obtained when making this latest change. If you wanted to place the object relative to a different corner of the screen you can also use posLeft and/or posBottom. The moveObjTo function came with the object functions that we had already obtained in the prior tutorial.

Our current code displays the object in a sprcified position relative to the edge of the browser window.

©2014 About.com. All rights reserved.