Threaded Mode | Linear Mode

Lewis · 11-09-2012, 06:44 PM

How can I make a banner at the top and bottom of my website that is on top of all of the content in the website but will NOT move when the user scrolls up and down etc?

A bit like MySpace and Facebook do with the chat bar at the bottom?

Funnyfish7 · 11-09-2012, 06:52 PM

If you are dealing with CSS (Which you really should be) then just go into your DIV CSS settings and choose positioning, choose fixed and then put in the coordinates to where you want it to be on the page! (Make sure to play with the settings in there because i haven't tried to make something stick to the page for awhile now and im not quite sure if its in position, but it will have a drop down that says 'fixed')

chillininvt · 11-09-2012, 06:52 PM

layer_name{
position:fixed;
left:100px;
top:150px;
}

immensegrass176 · 11-09-2012, 06:52 PM

<html>
<head>
<style>
div.anchorBar{ position:relative; padding:0px; height:0px };
div.myEditBar{ z-index:1; position:relative; top:0px; height:34px; width:90%; border:1px solid red };
div.myAppBar{ z-index:1; position:absolute; top:0px; height:34px; width:90%; border:1px solid blue };
</style>
<script>
onload = function()
{ onscroll = function()
{ var db = document.body;
var sT = db.scrollTop - anchorBar.offsetTop;
if(sT<0) sT = 0;
myEditBar.style.pixelTop = sT;

var sT = db.scrollTop;
myAppBar.style.pixelTop = sT;
};
};
</script>
</head>
<body>
<DIV ID=myAppBar class=myAppBar></DIV>
 
<pre>
Some contents may show first.
</pre>
 
<DIV ID=anchorBar class=anchorBar></DIV>
<DIV ID=myEditBar class=myEditBar></DIV>
 
 
 
 
 
 
 
</body>
</html>