cosmetic issue when sticking div to bottom on window.scroll_问答_开发者

cosmetic issue when sticking div to bottom on window.scroll

开发者 https://www.devze.com 2023-01-05 17:19 出处：网络

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

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.

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');
    }
}