Hi guys,
I have a rather annoying cosmetic issue with jQuery. I'm using the $(window).scroll event to stick a div to the bottom of the window except when the it reaches the footer in which case it stays right above. This basically gives me a similar effect (just the other way around) to the one used here on stackoverflow for the "How to format" tooltip displayed when asking a question.
The issue is that the animation isn't "nice":
- the div looks like it's "shaking" as you scroll the window.
- This behaviour is stronger when scrolling up than when scrolling down
- The behaviour seems to be worse with Firefox than with other browsers
- This doesn't occur once we've reached the footer in which case the div stays nicely above it.
Please find below the whole code you can just copy/paste to test.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
function positionToolbar() {
var windowTop = $(window).scrollTop();
var windowHeight = $(window).height();
var toolbarHeight = $("#toolbar").height();
var top = windowHeight + windowTop - toolbarHeight;
var footerTop = $("#footer").position().top;
if ((top + toolbarHeight) >= footerTop) {
$("#toolbar").css('top',footerTop - toolbarHeight);
} else {
$("#toolbar").css('top', windowHeight + windowTop - toolbarHeight);
}
}
positionToolbar();
$(window).scroll(function() {
positionToolbar();
});
});
</script>
<style type="text/css">
body { margin: 0; padding: 0}
#toolbar { width: 100%; height: 50px; background-color: blue; position: absolute }
#whatever { height: 2000px; width: 100%; background-color: yellow}
#footer { width: 100%; height: 300px; background-color: red }
</style>
</head>
<body>
<div id="toolbar"></div>
<div id="whatever"></div>
<div id="footer"></div>
</body>
</html>
Any help would be very much appreciated. Thanks.