I'm working with the cookie-cutter code located here:
http://www.jtricks.com/javascript/na.../floating.html
Very helpful script, BTW!
I'm trying to modify it, though, so that the menu will scroll relative
to a parent DIV instead of the main window. So, I have something like
this (simplified so that you can copy it to your viewer and see the
problem):
<br><br><br><br><br>
<table height="1000">
<tr valign="top">
<td> </td>
<td>
<div id="primary" style="position: relative">
<div id="floatdiv" style="
position: relative;
top: 0px; left: 0px;
width: 135px; height: 50px; border: 2px solid #000000">
Menu
</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
// copy from jtricks above
</script>
You can see that the physical location of "primary" is 110px from the
top of the window. It's not positioned there through CSS, though; that
just happens to be where it falls in the design because of elements on
the page above it. In the sample, I gave a bunch of <br>, but on my
live page there's a logo, navigation, etc.
My problem is that when "floatdiv" moves down, it consistently stays
110px from the top of the window. Meaning, if you scroll down two or
three folds, you'll see 110px of white above the word "Menu," when I
really want it to be more like 10px. When the page initially loads
before you scroll down, the position is perfect; I just want it to not
remember to be 110px down when you scroll.
Or, I guess it's more accurate to say that I don't want the menu to
start moving until I've scrolled down by around 100px.
Any ideas on how to modify the code so that when I scroll down,
"floatdiv" will be 10px or so from the top instead of 110? I tried
modifying the "targetY" variable to 110, then to 0, then to -110, and
it doesn't seem to change anything.
TIA,
Jason