Home/ Questions/Q 967689
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T02:21:34+00:00

I have a rather annoying cosmetic issue with jQuery. I’m using the $(window).scroll event

  • 0

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”:

  1. the div looks like it’s “shaking” as you scroll the window.
  2. This behaviour is stronger when scrolling up than when scrolling down
  3. The behaviour seems to be worse with Firefox than with other browsers
  4. 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The solution is to use fixed/bottom 0 positioning by default. That way the position doesn’t need to be updated on window scroll and the cosmetic issue disapears.

    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('position','absolute').css('top',footerTop - toolbarHeight);
    } else {
        $("#toolbar").css('position','fixed').css('top','auto').css('bottom','0');
    }
}
    • 0