Scrolling navbars

[crazycoder]

Does anyone know how I could get this menu of id navcontainer to follow you down the screen as you scroll. I set the position to absolute in CSS then set the bottom offset to 150px. So, I just want it to stay 150px from the bottom even when you scroll down.

[phpnovice]

There's the onscroll event.

[crazycoder]

Kind of like,

window.onscroll = document.getElementById("navcontainer").style.bottom = '150px';?

[phpnovice]

That would have to be more like this:
window.onscroll = function() {
document.getElementById("navcontainer").style.bottom = '150px';
return true;
}

[crazycoder]

That doesn't work for me. I put in my head tag, if that makes a diference.

[phpnovice]

Which browser and version did you test in?

[crazycoder]

I tested in IE and Opera.

[crazycoder]

And now FireFox.

[James Gatka]

-----

[crazycoder]

I want it to scroll from the bottom. So, I put this together, but it still doesn't work.

<script language="JavaScript" type="text/javascript">

function stay() {
var nV = 0;
if ( !document.body.scrollTop ) { nV = document.documentElement.scrollBottom; }
else { nV = document.body.scrollBottom; }
document.getElementById('navcontainer').style.bottom = x + nV + "px";
setTimeout('stay()', 20);
}


function init() {
var x = document.getElementById('navcontainer').offsetBottom;
stay();
}


window.onload = init;
</script>

[phpnovice]

First test... Does the following trigger an alert when you scroll?
window.onscroll = function() {
alert("scrolling detected!");
return true;
}
Test it in different browsers, too. Post your results. Thanks.

[crazycoder]

Yep, that works.

[phpnovice]

OK, then the problem isn't with the onscroll event handler I gave you. The problem is with style.bottom -- which I'm not familiar with. I'll have to read up on it. ;)

[crazycoder]

Thanks

[crazycoder]

O'REILLY JavaScript Reference says that you can change the bottom attribute with something like:
document.getElementById("blockD2").style.bottom = "35px";

[crazycoder]

window.onscroll = function() {
document.getElementById('navcontainer').style.offsetBottom = "150px";
return true;
}


doesn't work either.

[phpnovice]

OK, here's the deal... To keep the object near the bottom of the client area, you must offset its position by the amount that the document is scrolled.

[phpnovice]

However, I find it easier to use style.top -- where the following is written just for IE (and in Transitional mode, at that), but you can add cross-browser functionality and Strict mode (if you like):
<div id="bottomDiv" style="position:absolute; left:300px; border:1px solid black;">
Bottom Div</div>

<script type="text/javascript">
<!--//
window.onscroll = function() {
var obj = document.getElementById("bottomDiv");
obj.style.top = document.body.scrollTop + document.body.offsetHeight - 50 + "px";
return true;
}
window.onload = window.onscroll;
//-->
</script>

[crazycoder]

Okay, thanks.

[crazycoder]

That didn't work for me but this works in Opera.

<!--//
window.onscroll = function() {
var obj = document.getElementById("navcontainer");
obj.style.top = document.body.scrollTop + 150 + "px";
return true;
}
window.onload = window.onscroll;
//-->

[Logician]

I want it to scroll from the bottom. So, I put this together, but it still doesn't work.

<script language="JavaScript" type="text/javascript">

function stay() {
var nV = 0;
if ( !document.body.scrollTop ) { nV = document.documentElement.scrollBottom; }
else { nV = document.body.scrollBottom; }
document.getElementById('navcontainer').style.bottom = x + nV + "px";
setTimeout('stay()', 20);
}


function init() {
var x = document.getElementById('navcontainer').offsetBottom;
stay();
}


window.onload = init;
</script>
Rule #1 of JS coding: Always enable or consult the JS console.
I'm sure that it will have something to say about this code, probably concerning 'x' being undefined in 'stay'.

if ( !document.body.scrollTop ) This test is flawed in that the property could have a value of zero.

if ( typeof document.body.scrollTop != 'undefined' )

[crazycoder]

You mean something like this,


var x;

function stay() {
var nV = 0;
if ( typeof document.body.scrollTop != 'undefined' ) { nV = document.documentElement.scrollBottom; }
else { nV = document.body.scrollBottom; }
document.getElementById('navcontainer').style.bottom = x + nV + "px";
setTimeout('stay()', 20);
}


function init() {
x = document.getElementById('navcontainer').offsetBottom;
stay();
}


window.onload = init;
?

Because that doesn't work for me.