Question

我对jQuery有一个相当讨厌的化妆品问题。我正在使用$（window）.scroll事件将div粘贴到窗口的底部，除非它到达页脚，在这种情况下它保持在正上方。这基本上给了我一个类似的效果（只是反过来）到stackoverflow上使用的那个在提问时显示的“如何格式化”工具提示。

问题是动画不是“好看的”：

当您滚动窗口时，div看起来像是“颤抖”。
向上滚动时此行为比向下滚动时更强
Firefox的行为似乎比其他浏览器更糟糕
一旦我们到达页脚就不会发生这种情况，在这种情况下div保持在它之上。

请在下面找到您可以复制/粘贴测试的完整代码。

<!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>

非常感谢任何帮助。感谢。

Answer 1

解决方案是默认使用固定/底部0定位。这样，不需要在窗口滚动上更新位置，并且化妆品问题会消失。

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

在window.scroll上将div粘贴到底部时的装饰问题

1 个答案: