Gitman
July 6, 2010, 11:23pm
1
Hi, I have this code for a floating menu - but it starts on an absolute position and then starts to move as you scroll once it reaches a certain distance from the top of the browser, I have seen floating menus that will also stop in a certain spot on the page, even if you continue to scroll the page, can I alter this code to make this menu stop at a certain point on the page?
<!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>
Gitman
July 12, 2010, 12:02am
2
Do I need to beg to get help on this, because I’m NOT above begggginn!!! PLESSSSSSSSSSSSSASEEEEEEEEEEEE HELP ME. PLEASE KIND SIRs
Where are all teh .js wizards at?!!?!
I need the menu to start out in an absolute position, and then go to fixed when you scroll but then stop at a certain spot on the page, when if you continue to scroll - this is so the menu doesn’t go down and on top of the long footer section.
I hope this will help.
<!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: fixed;
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: 100px;
}
</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>
<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>
<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>
Any ideas? I know you can do this, just not sure if I can alter this code to make it work.
The problem with switching from position:absolute to position:fixed and back again is that:
You’ll get uneven results (ie the box will stop at different places because scrolling is not done by 1px but in chunks and chunks will be of different size)
or
You’ll get jitter (if you compensate for that by moving position:absolute box).
Its better to use moving position:absolute box which will compensate for jumpy scrolling through animation, such as this one .