There seems to be different ways of doing it… here is one:
http://plugins.jquery.com/files/stickyfloat_0.htm
Another way is to put the menu in a container so that it stops when it reaches the bottom of the container… are there any other ways to stop a floating menu at a certain distance from the bottom of the page? I can’t believe how difficult it has been to figure out a solution for this that will work on our site.
We have a menu now, that uses css and js… so that the menu starts our positioned a certain distance from the top of the page, and then begins to move once there is only 5px between the top of the menu and the top of the browser… and the best part is that the menu is perfectly still as you scroll, it’s not jerky like the stickyfloat menu above. if we could make the stickyfloat menu above as smooth as the menu below when you scroll, it would be perfect.
See how smooth this menu is when it starts moving:
The menu we currently have does everything we need but stop at the bottom before over running the footer.
here is the current menu we use, as described above, are there any other ways to stop this menu at a certain point from the bottom of the page so it doesn’t overrun the footer?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test floating menu</title>
<style type="text/css">
div.banner {
margin: 0;
position: absolute;
top: 100px;
font-size: 80% /*smaller*/;
font-weight: bold;
line-height: 1.1;
left: auto;
width: 8.5em;
right: 2em;
}
div.banner ol {
list-style-type: none;
}
div.fixedBanner {
position: fixed;
top: 20px;
}
</style>
</head>
<body>
<div id="myBanner" class="banner">
<ol>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ol>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\\\s|^)' + cls + '(\\\\s|$)'));
}
function addClass(ele, cls) {
if (!this.hasClass(ele, cls)) {
ele.className += " " + cls;
}
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\\\s|^)' + cls + '(\\\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
setInterval(function () {
var el = document.getElementById('myBanner'),
offset = document.documentElement.scrollTop || document.body.scrollTop;
if (offset > 80) { // = 100 - 20
addClass(el, 'fixedBanner');
} else {
removeClass(el, 'fixedBanner');
}
}, 50);
</script>
</body>
</html>