Alt-Web Design & Publishing
CSS2 Sticky-Text Demo
Description:
If your browser supports Fixed Positioned containers or divisions - as most modern browsers do, you should see a semi-transparent box in the left side portion of this screen. As you scroll up or down, the box remains visible. If you are using an obsolete browser like Netscape 4, the box is not visible until you scroll down a bit.
Method:
CSS Code
#Sticky {
width: 15px; /**adjust to suit**/
color:#FF0000;
background: #FFCC00; /**optionally you could use a semi-transparent.png for a see through effect**/
border: 2px dotted red;
position:fixed;
/** IE7+, Firefox, Mozilla, Opera, Safari, Konqueror... will use this **/
left: 10px;
top: 27%;
padding: 0 10px 0 10px;
/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
_position: absolute;
left: 10px;
top: 27%;
}
Html Sticky Code
<body>
<div id="Sticky">
<p>Here is some sticky text.</p>
</div>
</body>
</html>
