可根据动态内容进行调整的 Jquery 粘性页脚

Posted 2023-03-21

【中文标题】可根据动态内容进行调整的 Jquery 粘性页脚

【英文标题】：Jquery sticky footer that adjusts with dynamic content

【发布时间】：2011-09-27 05:43:16

【问题描述】：

我目前在这里使用插件http://codedumper.com/jquerystickyfooter 来创建贴纸页脚。

看看http://client.astam.co.uk。它可以按您的预期工作。

唯一的问题是，例如，如果出现错误消息并且用户单击删除，或者切换的内容可用，页脚将从浏览器底部向上跳，直到调整窗口大小，然后它会自行解决。

有没有办法让插件知道重新定位自己？

【问题讨论】：

为什么不直接使用 position: fixed; bottom: 0; width: 100%; 样式的 div 并在其中放入 margin: 0 auto; div？除非你试图弥补 IE6s 的定位错误，否则需要 javascript 吗？

谢谢您的回复，现在想起来，在css中使用定位固定方法可能会更好，而忘记使用jquery。我想我会沿着这条路走。

【参考方案1】：

最好使用 $.stickyFooterPos() 作为其他布局更改函数的回调 就像将 app.js 中的关闭函数更改为

    function close()
    $(this).attr('href', 'javascript:void(0)');
    $(this).parent().fadeOut(200,function()$.stickyFooterPos());

P.S：正如其他人所建议的那样，考虑到 IE6 用户数量正在下降的事实，position:fixed 是一个更好的选择......（请参阅http://www.w3schools.com/browsers/browsers_explorer.asp 和 http://www.w3schools.com/browsers/browsers_stats.asp）

【讨论】：

谢谢你的回复，现在想起来了，最好还是用css中固定的位置，忘了用jquery吧。我想我会沿着这条路走。

【参考方案2】：

你支持 IE6 吗？如果没有，那么您可以简单地将页脚定位为“位置：固定”，而不是使用 jQuery 插件。除此之外，JQ 插件仅在窗口加载、调整大小和滚动时定位 div。为警报关闭按钮添加的以下代码将起作用 -

    $('#alert .close').click(
       function() 
         $.stickyFooterPos();
        
   );

只需将其添加到您的 js 文件中，单击关闭按钮时定位就会起作用。

编辑 - 如果您使用 fadeOut() 作为关闭按钮，前面的代码可能不起作用。相反，您可以将关闭按钮的代码更改为 -

$(this).attr('href', 'javascript:void(0)');
$(this).parent().fadeOut(200, function()$.stickyFooterPos());
$.stickyFooterPos();

【讨论】：

谢谢你的回复，现在想起来了，最好还是用css中固定的位置，忘了用jquery吧。我想我会沿着这条路走。