/    Sign up×
Community /Pin to ProfileBookmark

Stopping the Floating menu

I’m having trouble making this menu dock in place, until I scroll far enough down for it to float. Confused? Basically this menu is 330px from the top, and 40px from the left. Scrolling down to the bottom of the page, I want to stop the menu at 100 px from the bottom and 40px from the left…I want the script to ignore that positioning when I start scrolling.
BTW-this is a nice script that works in NS7,IE5,FF, and mac IE5…
Cheers
<script>
if (!document.layers)
document.write(‘<div id=”divStayTopLeft” style=”position:absolute”>’)
</script>

<layer id=”divStayTopLeft”>

<!–EDIT BELOW CODE TO YOUR OWN MENU–>
<table border=”1″ width=”130″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”100%” bgcolor=”#FFFFCC”>
<p align=”center”><b><font size=”4″>Menu</font></b></td>
</tr>
<tr>
<td width=”100%” bgcolor=”#FFFFFF”>
<p align=”left”> <a href=”http://www.dynamicdrive.com”>Dynamic Drive</a><br>
<a href=”http://www.dynamicdrive.com/new.htm”>What’s New</a><br>
<a href=”http://www.dynamicdrive.com/hot.htm”>What’s Hot</a><br>
<a href=”http://www.dynamicdrive.com/faqs.htm”>FAQs</a><br>
<a href=”http://www.dynamicdrive.com/morezone/”>More Zone</a></td>
</tr>
</table>
<!–END OF EDIT–>

</layer>

<script type=”text/javascript”>

/*
Floating Menu script- Roy Whittle ([url]http://www.javascript-fx.com/[/url])
Script featured on/available at [url]http://www.dynamicdrive.com/[/url]
This notice must stay intact for use
*
/

//Enter “frombottom” or “fromtop”
var verticalpos=”fromtop”

if (!document.layers)
document.write(‘</div>’)

function JSFX_FloatTopDiv()
{
var startX = 40,
startY = 330;
var ns = (navigator.appName.indexOf(“Netscape”) != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos==”fromtop”)
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos==”fromtop”){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY – ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY – startY – ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout(“stayTopLeft()”, 10);
}
ftlObj = ml(“divStayTopLeft”);
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@FromU2MEDec 30.2005 — A link to an example would really help!
Copy linkTweet thisAlerts:
@HappyworkerauthorDec 30.2005 — www.jgsprintmedia.com/test/index_all.html

This will give you the idea anyway....my html is still a long way away.

I want it to snug up to the menu bar (top left), but keeping it about 40px from the bottom when you scroll to the bottom.

I'm still learning javascript, and I appreciate your help.

Cheers,
Copy linkTweet thisAlerts:
@FromU2MEDec 30.2005 — I'm not sure, since you can continue scrolling the page even when you hit bottom, and the menu follows you...

Not sure yet how to achieve that...
Copy linkTweet thisAlerts:
@HappyworkerauthorDec 31.2005 — It's just a matter of containing it...although I could be wrong.

I have been trying to approach this as if setting a certain height. The end result I'm looking for is to have the floating layer only fit within a certain area on the page. Then whether the person opens up a small window or a full size window, the <div layer> will remain at its opening position until it reachs the top of the scrolled page.
×

Success!

Help @Happyworker spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...