How do I make a layer on a page that will not move when the user scrolls down?

How do I make a layer on a page that will not move when the user scrolls down? - Printable Version

+- Twitist Forums (http://twitist.com)
+-- Forum: Facebook forums (/forum-14.html)
+--- Forum: General facebook and life forums (/forum-25.html)
+--- Thread: How do I make a layer on a page that will not move when the user scrolls down? (/thread-33609.html)

How do I make a layer on a page that will not move when the user scrolls down? - 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>