part of page should not scroll with rest

P

Peter Crom

Hi everyone,

I am looking for a solution for the following:

I have a frame full of lots o'text with a title on top.
as the reader scrolls through the text, I would like to have the title to
rest in peace at the top of my page.
I have an intuition that something must be related with:

<STYLE TYPE="text/css" MEDIA="screen, print">
..keeping {
color: black;
align: center;
pos: absolute;
z-index: 10;
top: 40px';
}
</STYLE>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
function set_it_right (me)
{
???
}
</SCRIPT>

<body onscroll="set_it_right(self)">

<div id=title class="keeping">THIS TEXT</div>
lots of text
</body>

But here my knowledge gets confused...

I do know a considerable lot of css and javascript, but some info seems hard
to get...
Please help me.
 
L

Lasse Reichstein Nielsen

Peter Crom said:
I am looking for a solution for the following:

I have a frame full of lots o'text with a title on top.
as the reader scrolls through the text, I would like to have the title to
rest in peace at the top of my page.
Click to expand...

Sounds like a job for CSS, position:fixed.
I have an intuition that something must be related with:
Click to expand...

Try:
---
<style type="text/css" media="screen, print">
#keeping {
color:black;
align:center;
position:fixed;
z-index:10;
top:40px;
}
</style>
---
However, that won't work in IE, because it doesn't understand any more
than rudimentary CSS 2. For its benefit we then add:
---
<!--[if IE]>
<style type="text/css">
#title {position:absolute;}
</style>
<script type="text/javascript">
var root = (document.documentElement && document.compatMode="CSS1Compat")?
document.documentElement : document.body;
root.attachEvent("onscroll",
function(event) {
document.all['title'].style.top =
(root.scrollTop+40)+"px";
});
</script>
<![end if]-->
---
It still fails in IE 4, because it doesn't know conditional comments,
but it's prettier than trying to detect IE the hard (read:impossible)
way.
I do know a considerable lot of css and javascript, but some info seems hard
to get...
Click to expand...

Actually, there is a hack for IE 6 that allows you to make fixed elements
(by positioning the absolutely wrt. the html element, and then scrolling
the body element instead). It is prettier than catching up to the scrolling,
but harder to do.
<URL:http://devnull.tagsoup.com/fixed/>
(I recommend against triggering "compatability mode", it is not meant
for new pages. I don't like his updated version for IE 5, because it adds
elements to the HTML to achieve the effect and requires quirks mode).

/L
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Mini Web Server in C++ (Part One) 4
Help with my responsive home page 2
How to have two html audio players on one page? 0
Having difficulty with the layout of these images / video for this web page 2
Working on mobile css menu with plenty of frustration! 2
Help with Visual Lightbox: Scripts 2
Javascript scroll to sections and also scroll to section but open relevant nav-tab 4
Help with code 0

Members online

No members online now.
Total: 134 (members: 0, guests: 134)
Robots: 332

Forum statistics

Threads
474,438
Messages
2,571,699
Members
48,796
Latest member
Greg L.

Latest Threads

Top